Barras de progreso en Bootstrap

Barra de progreso básica

Una barra de progreso puede ser usada para mostrar al usuario el tiempo que tarda un proceso en ejecutarse.

Barras de progreso en Bootstrap 4

Para crear una barra de progreso por defecto, añade la clase .progress a un contenedor de progreso y añade también la clase .progress-bar para la barra de progreso dentro de este contenedor. Utiliza la clase propiedad width para mostrar el ancho de la barra de progreso.

Ejm

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

Altura de la barra de progreso

Altura de la barra de progreso en Bootstrap 4

La altura de la barra de progreso es de 16 píxeles por defecto. Usa la propiedad height CSS para cambiarla. Ten en cuenta que debe establecer la misma altura para el contenedor de progreso y la barra de progreso

Ejm

<div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%;height:20px"></div>
</div>

Etiquetas de barras de progreso

Añade un texto dentro de la barra de progreso que muestre el porcentaje de la misma

Etiquetas de las barras de progreso

Ejm

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

Colores de las barras de progreso

Colores de las barras de progreso en Bootstrap

Por defecto, la barra de progreso es azul (primaria). Utiliza cualquiera de las clases de fondo contextual Bootstrap 4 para su color:

Ejm

<!-- Blue -->
<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>

<!-- Green -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>

<!-- Turquoise -->
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>

<!-- Orange -->
<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%"></div>
</div>

<!-- Red -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>

<!-- White -->
<div class="progress border">
  <div class="progress-bar bg-white" style="width:60%"></div>
</div>

<!-- Grey -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>

<!-- Light Grey -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>

<!-- Dark Grey -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

Barras de progreso a rayas

Use la clase .progress-bar-striped para agregar franjas a las barras de progreso:

Barras de progreso a rayas Bootstrap 4

Ejm

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

Barras de progreso animadas

Agrega la clase .progress-bar-animated para animar la barra de progreso.

Barras de progreso animadas con Bootstrap 4

Ejm

<div class="progress-bar progress-bar-striped progress-bar-animated" 
style="width:40%"></div>

Barras de progreso múltiples

Las barras de progreso también se pueden apilar.

Múltiples barras de progreso Bootstrap 4

Ejm

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    Warning
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    Danger
  </div>
</div>