tutorial bootstrap-progressbar

PROGRESS BARS

Las barras de progreso permiten mostrar de forma continua el estado de ejecución de una tarea. Como sucede con muchos otros componentes, Bootstrap 3 permite crear barras de progreso contextuales, que modifican su aspecto para adecuarlo al concepto de éxito, información, aviso o error. Ejemplo:

Ejemplo

El siguiente ejemplo muestra el código HTML recomendado para crear la barra de progreso, que incluye los atributos necesarios para mejorar su accesibilidad:

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar"
       aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
       style="width: 40%">
    <span class="sr-only">40% completado (éxito)</span>
  </div>
</div>
 
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar"
       aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
       style="width: 20%">
    <span class="sr-only">20% completado</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: 60%">
    <span class="sr-only">60% completado (aviso)</span>
  </div>
</div>
 
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar"
       aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"
       style="width: 80%">
    <span class="sr-only">80% completado (peligro / error)</span>
  </div>
</div>

Resultado

Barras de Proceso Cebreadas

Las barras cebreadas (del inglés "striped") muestran un patrón de franjas oblicuas que modifican el aspecto básico de las barras de progreso por defecto. Como las franjas se crean con gradientes de CSS, este tipo de barras de progreso no funcionan en Internet Explorer 8. Ejemplo:

<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar"
       aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
       style="width: 40%">
    <span class="sr-only">40% completado (éxito)</span>
  </div>
</div>
 
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar"
       aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
       style="width: 20%">
    <span class="sr-only">20% completado</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: 60%">
    <span class="sr-only">60% completado (aviso)</span>
  </div>
</div>
 
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" role="progressbar"
       aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"
       style="width: 80%">
    <span class="sr-only">80% completado (peligro / error)</span>
  </div>
</div>