Barras de progreso W3.CSS
Se puede usar una barra de progreso para mostrar qué tan avanzado está un usuario en un proceso:
Barra de progreso básica
Se puede usar un elemento <div> normal para una barra de progreso.
La propiedad de ancho de CSS se puede usar para establecer la altura y el ancho de una barra de progreso.
Ejemplo
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
Ancho de la barra de progreso
Cambie el ancho de una barra de progreso con la propiedad de ancho CSS (de 0 a 100%):
Ejemplo
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
Colores de la barra de progreso
Use las clases de color w3- para cambiar el color de una barra de progreso:
Ejemplo
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
Etiquetas de barra de progreso
Agregue texto dentro de un elemento contenedor w3 para agregar una etiqueta a la barra de progreso.
Utilice la clase w3-center para centrar la etiqueta. Si se omite, se alineará a la izquierda.
Ejemplo
<div class="w3-light-grey">
<div
class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
Tamaño del texto de la barra de progreso
Use las clases de tamaño w3 para cambiar el tamaño del texto en el contenedor:
Ejemplo
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
Relleno de la barra de progreso
Use las clases de relleno w3 para agregar relleno al contenedor.
Ejemplo
<div class="w3-light-grey">
<div
class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
Barras de progreso redondeadas
Use las clases w3-round para agregar esquinas redondeadas a una barra de progreso:
Ejemplo
<div class="w3-light-grey w3-round">
<div
class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
Barra de progreso dinámica
Use JavaScript para crear una barra de progreso dinámica:
Ejemplo
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green"
style="height:24px;width:1%"></div>
</div>
<button class="w3-button w3-light-grey" 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ámica con etiquetas
Etiqueta centrada:
Ejemplo
Etiqueta alineada a la izquierda:
Ejemplo
Etiqueta fuera de la barra de progreso:
Ejemplo
20%
Otro ejemplo (avanzado):
Ejemplo
Added 0 of 10 photos