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

Question

[interprise]

Задача такая, есть необходимость сделать полосу загрузки, которая будет адекватно себя вести как на десктопе так и на мобильных браузерах.

Сейчас реализованно так. Много <img> (дизайнеры замысловатую нарисовали) у которых я по мере загрузки меняю src.
Все работает нормально, если ширины экрана хватает, но нужно сделать так, чтобы на маленьком экране мобильного устройства полоса не переносилась на след строку.
Что можете посоветовать?

PS html+js не основной профиль

сейчас реализовано так

<img id="load_0" src="/empty.png" >
    <img id="load_1" src="/empty.png" >
    <img id="load_2" src="/empty.png" >
    <img id="load_3" src="/empty.png" >

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

пример

Comments

[interprise]

Денис Акимкин: завтра кину. ну вообще просто квадратики которые меняют свой цвет.

[interprise]

interprise: отредактировал, с примером и кодом

Answer 1

[Владимир Ио]

Рас www.w3schools.com/bootstrap/bootstrap_progressbars.asp
Двас https://jqueryui.com/progressbar/#default
Трис https://kimmobrunfeldt.github.io/progressbar.js/
и т.д.

Comments

[interprise]

и не один не подходит по дизайну.

[Владимир Ио]

Ну я вам вроде намекнул как такая штука называется, их тьма. Поищите)

[interprise]

отредактировал, чтобы было понятно что я хочу