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

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

Сделал как 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"));
}


Запихал функцию и вызываю при изменении размеров экрана.
  • Вопрос задан
  • 86 просмотров
Пригласить эксперта
Ответы на вопрос 2
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы