Barra de progreso Bootstrap 5

Barra de progreso básica

La barra de progreso se puede usar para mostrar el progreso del usuario en algún proceso.

Para crear una barra de progreso predeterminada, agregue .progress Añada la clase a los elementos contenedores y configure .progress-bar Añada la clase a sus elementos hijos. Use la propiedad width de CSS para establecer el ancho de la barra de progreso:

Ejemplo

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

Prueba por ti mismo

Altura de la barra de progreso

La altura predeterminada de la barra de progreso es 1rem（generalmente de 16px）。Utilice CSS height propiedades para cambiarla.

Consejo:Tenga en cuenta que debe establecer la misma altura para el contenedor de progreso y la barra de progreso:

Ejemplo

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

Prueba por ti mismo

Etiqueta de barra de progreso

Añada texto dentro de la barra de progreso para mostrar el porcentaje visible:

Ejemplo

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

Prueba por ti mismo

Barra de progreso de color

Por defecto, la barra de progreso es azul (principal). Use cualquier clase de fondo contextual para cambiar su color:

Ejemplo

<!-- 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>
<!-- Gris -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<!-- Gris Claro -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>
<!-- Gris Oscuro -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

Prueba por ti mismo

Barras de progreso con rayas

Usar .progress-bar-striped Añadir rayas a la barra de progreso con la clase:

Ejemplo

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

Prueba por ti mismo

Animación de barra de progreso

Añadir .progress-bar-animated Usar clases para crear animaciones de barras de progreso:

Ejemplo

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

Prueba por ti mismo

Múltiples barras de progreso

Las barras de progreso también se pueden apilar:

Ejemplo

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    Espacio libre
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    Advertencia
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    Peligro
  </div>
</div>

Prueba por ti mismo