Barra de progreso Bootstrap4
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 elemento con la clase.progressde <div>.
- Luego, dentro del <div> anterior, agregue un elemento con la clase.progress-barde <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 predeterminada de la barra de progreso es 16px. 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
Se 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 »
Barra de progreso de diferentes colores
Por defecto, la barra de progreso es azul. Bootstrap4 también ofrece 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 a rayas
Se puede usar la clase.progress-bar-stripedpara configurar una barra de progreso a rayas:
Ejemplo
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>
Pruébelo »
Barra de progreso animada
Use la clase.progress-bar-animatedpara agregar 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 se puede configurar 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 »