Bootstrap 4, barras de progreso

Barra de progreso básica

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

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

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

Ejm

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

Colores de las barras de progreso

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:

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.

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.

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>