Tamaños
Existen en la biblioteca tres tamaños para definir estos elementos, (sm | md | lg) el valor medio es por default
entonces no es necesario agregarlo alnombre de la clase.
La configuración es a través de dos contenedores uno dentro del otro en los cuales el primero de ellos
va a mostrar lo que falta y el segundo va a mostrar el avance.
Las clases utilizadas son para el contenedor externo .progress-bar y para
el interno .progress-[color] donde color es el color del estado completado.
Muestra Avance
Vamos a ver un ejemplo muy sencillo de como avanza el progress bar cuando presionamos un botón.
Cada vez que presionamos el botón aumentamos el ancho del elemento que lleva la clase progress-[color]
Código Html
Código JS
const Aumentar = () => {
let ancho = document.getElementById("pb1").children[0].offsetWidth
if(document.getElementById("pb1").offsetWidth >= ancho + 30)
document.getElementById("pb1").children[0].style.width = ancho + 30 + "px"
else
document.getElementById("pb1").children[0].style.width = "100%"
}
const Reiniciar = () => {
document.getElementById("pb1").children[0].style.width = 0 + "px"
}