Bootstrap - Barras de progreso
Este capítulo trata sobre las barras de progreso de Bootstrap. El propósito de las barras de progreso es mostrar que los activos se están cargando, en progreso o que se está realizando una acción con respecto a los elementos de la página.
Las barras de progreso usan transiciones y animaciones CSS3 para lograr algunos de sus efectos. Estas funciones no son compatibles con Internet Explorer 9 y versiones anteriores de Firefox. Opera 12 no admite animaciones.
Barra de progreso predeterminada
Para crear una barra de progreso básica:
Agrega un <div> con una clase de .progress.
A continuación, dentro del <div> anterior, agregue un <div> vacío con una clase de .progress-bar.
Agregue un atributo de estilo con el ancho expresado como porcentaje. Digamos, por ejemplo, style = "60%"; indica que la barra de progreso estaba al 60%.
Veamos un ejemplo a continuación:
<div class = "progress">
<div class = "progress-bar" role = "progressbar" aria-valuenow = "60"
aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
</div>Barra de progreso alternativa
Para crear una barra de progreso con diferentes estilos:
Agrega un <div> con una clase de .progress.
A continuación, dentro del <div> anterior, agregue un <div> vacío con una clase de .progress-bar y clase progress-bar-* donde * podría estar success, info, warning, danger.
Agregue un atributo de estilo con el ancho expresado como porcentaje. Digamos, por ejemplo, style = "60%"; indica que la barra de progreso estaba al 60%.
Veamos un ejemplo a continuación:
<div class = "progress">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
<span class = "sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-danger" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
<span class = "sr-only">10% Complete (danger)</span>
</div>
</div>Barra de progreso a rayas
Para crear una barra de progreso rayada:
Agrega un <div> con una clase de .progress y .progress-striped.
A continuación, dentro del <div> anterior, agregue un <div> vacío con una clase de .progress-bar y clase progress-bar-* donde * podría estar success, info, warning, danger.
Agregue un atributo de estilo con el ancho expresado como porcentaje. Digamos, por ejemplo, style = "60%"; indica que la barra de progreso estaba al 60%.
Veamos un ejemplo a continuación:
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
<span class = "sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-danger" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
<span class = "sr-only">10% Complete (danger)</span>
</div>
</div>Barra de progreso animada
Para crear una barra de progreso animada:
Agrega un <div> con una clase de .progress y .progress-striped. También agrega clase.active a .progress-striped.
A continuación, dentro del <div> anterior, agregue un <div> vacío con una clase de .progress-bar.
Agregue un atributo de estilo con el ancho expresado como porcentaje. Digamos, por ejemplo, style = "60%"; indica que la barra de progreso estaba al 60%.
Esto animará las rayas de derecha a izquierda.
Veamos un ejemplo a continuación:
<div class = "progress progress-striped active">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
</div>Barra de progreso apilada
Incluso puede apilar varias barras de progreso. Coloque las múltiples barras de progreso en el mismo.progress para apilarlos como se ve en el siguiente ejemplo -
<div class = "progress">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>