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

Товарищи! Подскажите как сверстать такую штуку:
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"));
}


Запихал функцию и вызываю при изменении размеров экрана.
  • Вопрос задан
  • 240 просмотров
Пригласить эксперта
Ответы на вопрос 2
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
в 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%;"
Ответ написан
Stalker_RED
@Stalker_RED
Можно и без js, задать размеры относительно ширины окна
height: 4vw;
width: 4vw;
https://jsfiddle.net/syb7kb65/
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы