Skip to main content
2 de 2
Maquetación en general: puntuación, ortografía, resaltado
masterguru
  • 16k
  • 5
  • 15
  • 28

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