Barra de progreso Bootstrap5
La barra de progreso puede mostrar el proceso de finalización de las tareas del usuario.
Los pasos para crear una barra de progreso básica son los siguientes:
- Agregue un.progress<div> con clase.
- Luego, dentro del <div> anterior, agregue un elemento con class.progress-bar<div> vacío.
- Agregue un atributo style con un ancho expresado en porcentaje, por ejemplo style="width:70%"indica que la barra de progreso está en la70%posición.
Altura de la barra de progreso
La altura de la barra de progreso es de 16px por defecto. Podemos usar la propiedad CSSheightpara modificarla:
Ejemplo
<div class="progress" style="height:20px;">
<div class="progress-bar" style="width:40%;"></div>
</div>
Pruébelo »
Etiqueta de la barra de progreso
Puede agregar texto dentro de la barra de progreso, como el porcentaje de progreso:
Ejemplo
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
Pruébelo »
Barras de progreso de diferentes colores
Por defecto, la barra de progreso es azul. Bootstrap5 también proporciona barras de progreso de los siguientes colores:
Ejemplo
<div class="progress">
<div class="progress-bar bg-success" style="width:40%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" style="width:50%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width:60%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width:70%"></div>
</div>
Pruébelo »
Barra de progreso rayada
Se puede usar.progress-bar-stripedla clase para crear una barra de progreso rayada:
Ejemplo
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>
Pruébelo »
Barra de progreso animada
Use.progress-bar-animatedla clase para agregar una animación a la barra de progreso:
Ejemplo
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div>
Pruébelo »
Barra de progreso de colores mixtos
La barra de progreso puede configurarse con varios colores:
Ejemplo
<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>
Pruébelo »