Как правильно сверстать этот progress bar?

Question

[Сергей Соболь]

Подскажите, как правильно сверстать этот progress bar, чтобы можно было динамично менять заполнение этого бара?

Comments

[Ankhena]

Из каких вариантов выбрать правильный?

После введения кастомных свойств, его можно делать хоть градиентом. Раньше тоже было можно, но это был не очень вариант.
Итак:
- градиент
- стилизовать range (правда, не очень подходит, т.к. не клиент его двигает)
- два блока, один над другим
- svg

[Анатолий Куликов]

С позиционированием сверстать и будет всё ок, а длину элемента указывать inline

[Сергей Соболь]

Ankhena, честно говоря я не знаю, как правильно сделать, подсказали через , но я не знаю, как сделать так, чтобы появилась линейка снизу.

[Ankhena]

Сергей Соболь,

чтобы появилась линейка снизу.

Нарисовать SVG и вставить фоном?
Нарисовать градиентами?

Вы сделайте хоть как-нибудь, а потом оптимизируйте.
Тут нет однозначного "правильно". Есть более или менее удобные для вас варианты для решения задачи.

Кстати, поиск по codepen.io даст вам десяток-другой примеров реализиций.