How to make a dynamic loading bar?

Question

JavaScript

The task is such, there is a need to make a loading bar that will adequately behave both on the desktop and on mobile browsers.
This is how it is now implemented. There are many <img>(the designers drew an intricate one) for which I change the src as it loads.
Everything works fine if there is enough screen width, but you need to make sure that on the small screen of the mobile device the strip does not wrap to the next line.
What can you advise?
PS html+js is not the main profile
now implemented like this

<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" >

and change src as it loads. but the problem is that part of the images on a small screen crawls to the second line, how to make sure that this does not happen.
example

Answer 1

Ras www.w3schools.com/bootstrap/bootstrap_progressbars.asp
Dvas https://jqueryui.com/progressbar/#default
Tris https://kimmobrunfeldt.github.io/progressbar.js/
etc