Las barras de progreso
Una barra de progreso se puede utilizar para mostrar hasta qué punto a lo largo de un usuario se encuentra en un proceso:
Barra de progreso básicos
La clase W3-progreso-contenedor define un contenedor para la barra de progreso y el W3-progressbar define la barra de progreso real (la zona de "lleno"). Ajuste el ancho de la barra de progreso con la propiedad width CSS:
Ejemplo
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:10%"></div>
</div>Barra de progreso Tamaños
Establecer la anchura / tamaño de la barra de progreso con un valor de porcentaje de 0 a 100%:
Ejemplo
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:50%"></div>
</div>Barra de progreso Colores
Por defecto, el color de la W3-progreso-contenedor es de color gris claro y el W3-progressbar es gris:
Cambiar su color con cualquiera de las clases de color W3.CSS:
Ejemplo
<div class="w3-progress-container
w3-light-blue">
<div class="w3-progressbar
w3-blue" style="width:75%"></div>
</div>Barras de progreso redondeadas
Utilice cualquiera de las clases W3-redondas para añadir esquinas redondeadas para sus barras de progreso:
Ejemplo
<div class="w3-progress-container w3-round">
<div
class="w3-progressbar w3-round" style="width:25%"></div>
</div>Las etiquetas Barra de progreso
Añadir un nuevo elemento dentro de la "w3-progressbar" para agregar una etiqueta a la barra de progreso.
Consejo: Utilice la clase W3-centro para mantener siempre la etiqueta centrada. Si se omite, se alinea a la izquierda.
Ejemplo
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:25%">
<div class="w3-center w3-text-white">25%</div>
</div>
</div>Barra de progreso dinámico
El uso de JavaScript para crear una barra de progreso dinámico:
Ejemplo
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:1%"></div>
</div>
<button class="w3-btn" onclick="move()">Click Me</button>
<script>
function move() {
var elem =
document.getElementById("myBar");
var width =
1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>Barra de progreso dinámico con etiquetas
Centrado etiqueta:
Alineado a la izquierda de etiquetas:
La etiqueta exterior de la barra de progreso: