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.
-
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– Diego RealesCommented 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.– Diego RealesCommented el 3 mar. 2022 a las 15:24
2 respuestas
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>
-
1Sii 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
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");
-
Buena respuesta, aunque el código parece más Python que Javascript.– TribyCommented 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