Как грамотно сверстать адаптивную строку прогресса?

Question

[Дмитрий Дербенев]

Товарищи! Подскажите как сверстать такую штуку:


Сделал как ul (вся строка) со множеством li (окружности), но как сделать, чтобы строка еще тянулась на всю ширину, сохраняя пропорции окружностей и при необходимости заполняя всю длину строки своим количеством.

Есть идеи как верстать такое?

upd.
Подозреваю без js не обойтись, решил задачу следующим образом:

var progressBar = $(".js-progress-bar").outerWidth();
var progressItem = $(".js-progress-bar li").outerWidth() + parseInt($(".js-progress-bar li:first-child").css("margin-right"));

$(".js-progress-bar").empty();

var amount = (progressBar - 20) / progressItem;

for (i = 0; i < amount - 1; i++) {
  $("<li></li>").appendTo($(".js-progress-bar"));
}

Запихал функцию и вызываю при изменении размеров экрана.

Comments

[Ankhena]

Можно так: https://jsfiddle.net/z2z6tcmd/
без js и vw,vh на случай, если полоска не на всю ширину окна, а только на какой-то блок.

Answer 1

[Антон Шаманов]

в bootstrap'e так:

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

т.е. через динамическое изменение style="width: 60%;"

Comments

[Дмитрий Дербенев]

Спасибо за ответ! Бутстрап в данном проекте не используется.

Answer 2

[Stalker_RED]

Можно и без js, задать размеры относительно ширины окна

height: 4vw;
width: 4vw;

https://jsfiddle.net/syb7kb65/