Bootstrap Barra de progreso
Introducción
En este tutorial, verá cómo usar Bootstrap para crear barras de progreso para estados de carga, redirección o acción.
Ejemplos de barras de progreso básicas, rayadas y animadas
Ejemplo
<div class="row">
<div class="span4">
<h3>Una barra de progreso básica vertical</h3>
<div class="progress">
<div class="bar"
style="width: 60%;"></div>
</div>
<h3>Barra de progreso rayada, usa gradientes para crear un efecto de rayas</h3>
<div class="progress progress-striped">
<div class="bar" style="width: 60%;"></div>
</div>
<h3>Una barra de progreso animada</h3>
<div class="progress progress-striped active">
<div class="bar" style="width: 50%;"></div>
</div>
</div>
</div>
<hr>
</div> <!-- /container -->
Ver ejemplo en línea
Tenga en cuenta que, para mostrar la tercera barra de progreso, agregue la clase '.active' para darle movimiento. Bootstrap usa transiciones CSS3 para crear esta animación. También puede ajustar dinámicamente el ancho de la barra de progreso mediante JavaScript. De esta manera, puede controlar el comportamiento del progreso.
Al crear barras de progreso, puede usar otros colores.
Ejemplo de barra de progreso con otros colores
Ejemplo
<div class="row">
<div class="span4">
<h3>La barra de progreso también puede tener otros colores</h3>
<div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped active" style="margin-bottom: 9px;">
<div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped active" style="margin-bottom: 9px;">
<div class="bar" style="width: 80%"></div>
</div>
</div>
</div>
</div>
<hr>
</div> <!-- /container -->
Ver ejemplo en línea
Compatibilidad del navegador
Hemos probado los dos ejemplos anteriores en diferentes navegadores. Descubrimos que se muestran correctamente en Firefox 12 y Chrome 19.0.1084.52, pero en Opera 11.62 no se muestra la animación, aunque se pueden ver las rayas y los gradientes. En Internet Explorer 8, todos los efectos de visualización son deficientes: sin animación, sin rayas ni gradientes.
Haga clic aquí para descargar todos los archivos HTML, CSS, JS e imágenes utilizados en este tutorial.
Otras extensiones