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
<div class="progress">
<div class="progress-bar" style="width:10%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-success" style="width:20%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width:50%"></div>
</div>
<div class="progress border">
<div class="progress-bar bg-white" style="width:60%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<div class="progress border">
<div class="progress-bar bg-light" style="width:80%"></div>
</div>
<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>