6.16. Barras de progreso (Bootstrap 3, el manual oficial)

Las barras de progreso permiten mostrar de forma continua el estado de ejecución de una tarea.

Compatibilidad con los navegadores Las barras de progreso de Bootstrap 3 utilizan las transiciones y animaciones de CSS3 para algunos de sus efectos. Estas características no están disponibles en Internet Explorer 9 o anterior ni tampoco en las versiones antiguas de Firefox. Además, Opera 12 no soporta las animaciones de CSS3.

6.16.1. Ejemplo sencillo

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" role="progressbar" aria-valuenow="60"
       aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% completado</span>
  </div>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.52 Barra de progreso en Bootstrap 3

6.16.2. Barras de progreso contextuales

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:

<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>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.53 Barras de progreso contextuales en Bootstrap 3

6.16.3. Barras de progreso 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>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.54 Barras de progreso cebreadas en Bootstrap 3

6.16.4. Barras de progreso animadas

Las barras de progreso animadas van un paso más allá de las anteriores barras de progreso cebreadas, ya que añaden una animación a las franjas. Este tipo de barras de progreso son ideales para las aplicaciones web, ya que el usuario tiene en todo momento la sensación de que su tarea está siendo atendida. Ninguna de estas barras de progreso animadas funcionan en Internet Explorer. Ejemplo:

<div class="progress progress-striped active">
  <div class="progress-bar" role="progressbar"
       aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"
       style="width: 45%">
    <span class="sr-only">45% completado</span>
  </div>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo (la imagen inferior no está animada):

Figura 6.55 Barras de progreso animadas en Bootstrap 3

6.16.5. Barras de progreso segmentadas

Bootstrap 3 también permite crear barras de progreso compuestas por múltiples segmentos. Para ello, crea una barra de progreso por cada segmento y después enciérralos todos dentro de un elemento con la clase .progress. Ejemplo:

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% completado (éxito)</span>
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 20%">
    <span class="sr-only">20% completado (aviso)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% completado (peligro)</span>
  </div>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.56 Barras de progreso segmentadas en Bootstrap 3