Si no estas trabajando con ningun frameworkframework de FrontEndFrontEnd lo unico que se me ocurre (y es bastante rusticorústico) es que crees un divdiv
con un width prestablecidowidth
y Heigthheigth
prestablecidos (ejemplo:500px 500px y 100px100px).
luegoLuego que dentro crees otro divdiv
dentro de ese con background-color:greenbackground-color:green
y height:100%;height:100%;
.
y agregaleY agrégale una class 0porcientoclass
0porciento
yY en el csscss creas clases 0porciento 0porciento, 5porciento5porciento, 10porciento10porciento, ...,ect el cual etc, las cuales tengan distinto widthwidth
. ejemplo: widthEjemplo:0% width:0%
, width:5%width:5%
, width:10%width:10%
.
yY luego con JavascriptJavascript a medida que va subiendo el contadorcontador, tenestienes que ir cambiando la clase 0porciento0porciento por la clase 5porciento5porciento.
<div class="barra-completa"><div id="barra-carga" class="0porciento"></div></div>
yY en el csscss
.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 JavascriptJavascript
const barra= Document.getElementById("#barra-carga");
let contador=0;
contador=5;
if contador>=5:
barra.classList.remove("0porciento");
barra.classList.add("5porciento");