Si no estas trabajando con ningun framework de FrontEnd lo unico que se me ocurre (y es bastante rústico) es que crees un div
con un width
y heigth
prestablecidos (ejemplo: 500px y 100px).
Luego que dentro crees otro div
dentro de ese con background-color:green
y height:100%;
.
Y agrégale una class
0porciento
Y en el css creas clases 0porciento, 5porciento, 10porciento, ..., etc, las cuales tengan distinto width
. Ejemplo: width:0%
, width:5%
, width:10%
.
Y luego con Javascript a medida que va subiendo el contador, tienes que ir cambiando la clase 0porciento por la clase 5porciento.
<div class="barra-completa"><div id="barra-carga" class="0porciento"></div></div>
Y en el css
.barra-completa{width:500px;height:300px} #barra-carga{height:100%,background-color:green;}.0porciento{width:0%} .5porciento{width:5%} .10porciento{width:10%}
Luego en el Javascript
const barra= Document.getElementById("#barra-carga");
let contador=0;
contador=5;
if contador>=5:
barra.classList.remove("0porciento");
barra.classList.add("5porciento");