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

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

Si no estas trabajando con ningun framework de FrontEnd lo unico que se me ocurre(y es bastante rustico) es que crees un div con un width prestablecido y Heigth (ejemplo:500px y 100px)

luego que dentro crees otro div dentro de ese con background-color:green y height:100%;

y agregale una class 0porciento

y en el css creas clases 0porciento , 5porciento, 10porciento,..,ect el cual tengan distinto width. ejemplo: width:0%, width:5%, width:10%

y luego con Javascript a medida que va subiendo el contador, tenes 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");

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

Si no estas trabajando con ningun framework de FrontEnd lo unico que se me ocurre(y es bastante rustico) es que crees un div con un width prestablecido y Heigth (ejemplo:500px y 100px)

luego que dentro crees otro div dentro de ese con background-color:green y height:100%;

y agregale una class 0porciento

y en el css creas clases 0porciento , 5porciento, 10porciento,..,ect el cual tengan distinto width. ejemplo: width:0%, width:5%, width:10%

y luego con Javascript a medida que va subiendo el contador, tenes 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");