Вопрос в том, как сверстать такой компонент, который в идеале бы принимал на вход кол-во шагов прогресса. С точки зрения css как я понял есть как минимум 2 подхода, это когда используют 2 дива вложенные один в другой, и у дочернего изменяется по клику свойство width, и также способ и использованием тегов списка li, и псевдо классов :before :after. Я сверстал что-то отдаленно похожее на дивах, но проблема возникла на этапе отображения разделителей между шагами, кажется это всё-таки нужно делать с помощью списков. Подскажите пожалуйста как лучше сделать данный прогресс бар с анимацией между шагами.
Вот конечный результат к которому я стремлюсь, svg со звездой на финише изменяет цвет: