0

estoy intentando hacer que un div, según el valor de una variable(0-100), tenga una barra de progreso más o menos grande. Lo he intentando con el objeto "progressbar" de html, pero no funciona, también he intentado colocar otro div encima y que vaya cambiando el height, pero tampoco me ha dado resultados. ¿Alguien sabe como lo puedo hacer? Gracias.

3
  • Te recomiendo que coloques el código que has intentado a ver cual es el error que tenés.
    – Agustin G.
    Commented el 3 mar. 2022 a las 14:54
  • Hola, puede optar por usar una libreria de diseño las cuales ya vienen con estas soluciones como boostrap Commented el 3 mar. 2022 a las 15:23
  • O puedes revisar como lo hacen y los estilos que usan y los copias y modificas de acuerdo con tus necesidades. Commented el 3 mar. 2022 a las 15:24

2 respuestas 2

1

Con la misma idea de Agustin Silva en su respuesta, puedes poner un div encima de otro, pero en lugar de cambiar la clase yo diría que cambies el width de la barra directamente, y te ahorras las clases CSS.

const barraProgreso = document.getElementById('barra-progreso');
const cantidadProgreso = document.getElementById('cantidad-progreso');
let progreso = 0;

const intervalo = setInterval(() => {
  progreso++;
  const porcentaje = `${progreso}%`;
  barraProgreso.style.width = porcentaje;
  cantidadProgreso.innerHTML = porcentaje;
  progreso = progreso % 100;
}, 20);
#contenedor-barra-progreso {
  border: 1px solid black;
  height: 32px;
  position: relative;
  width: 300px;
}

#barra-progreso {
  background-color: lightgreen;
  height: 100%;
  position: absolute;
}

#cantidad-progreso {
  float: left;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div id="contenedor-barra-progreso">
  <div id="barra-progreso"></div>
  <span id="cantidad-progreso">0%</span>
</div>

1
  • 1
    Sii tambien pense en eso. Pero no estaba seguro de si se iba a renderizar en el DOM, Esta manera si funciona es mas efectiva :D Commented el 3 mar. 2022 a las 18:33
1

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");
2
  • Buena respuesta, aunque el código parece más Python que Javascript.
    – Triby
    Commented el 3 mar. 2022 a las 18:12
  • Si puede ser, hace rato no trabajo con Javascript. Pero la logica es la misma Commented el 3 mar. 2022 a las 18:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.