Vamos a ver como funcionan las barras de progreso en bootstrap 4.

Este elemento puede darnos gran utilidad cuando se rellenan formularios, se recogen datos de una bbdd por medio de php… dando información a los usuarios de forma muy atractiva.

Para empezar debemos de crear nuestra barra por medio de la clase progress y después crear los elementos de nuestra barra donde debemos de usar la clase progress-bar.

El formato más sencillo de una barra de progreso en bootstrap 4 es el siguiente

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

</div>

Aquí vemos como el div que marca la barra contiene a la barra propiamente dicha la cual puede recibir como contenido el texto que queramos.

En este caso hemos usado un style para marcar la zona completada de la barra, pero podemos utilizar las clases w-25, w-50 o w-75. Claro que personalmente prefiero usar el style ya que pensando en aplicaciones dinámicas puedes recibir un parámetro y rellenar la parte que desees.

No obstante en esta entrada usaremos las clases ya dadas para fortalecer su uso y para no ensuciar tanto el código de ejemplo, de la siguiente forma:

<div class="progress">
	
<div class="progress-bar w-75" >75%</div>

</div>

Del mismo modo podemos usar las clases bg-[color] para cambiar el color de la barra de progreso como en el siguiente ejemplo

<div class="progress">
	
<div class="progress-bar w-75 bg-success" >75%</div>

</div>

Incluso tenemos la clase progress-bar-striped que hace que la barra de progreso aparezca rallada dando otro aspecto a la misma

<div class="progress">
	
<div class="progress-bar w-75 progress-bar-striped" >75%</div>

</div>

Y si queremos que la barra tenga una cierta animación podemos usar la clase progress-bar-animated

<div class="progress">
	
<div class="progress-bar w-75 progress-bar-striped progress-bar-animated" >75%</div>

</div

Nota: si lo que quieres es hacer que las barras crezcan de forma animada, te recomiendo mi entrada para hacer ese efecto con css.

Ahora ya tenemos todas las herramientas para hacer nuestras barras de progreso en bootstrap 4 por lo que podemos mezclarlas y crear efectos realmente espectaculares con muy muy poco código como en el siguiente ejemplo:

<div class="progress">
	
<div class="progress-bar w-25 bg-success progress-bar-striped progress-bar-animated" >25%</div>

	
<div class="progress-bar w-50 bg-primary progress-bar-striped progress-bar-animated" >50%</div>

	
<div class="progress-bar w-25 bg-danger progress-bar-striped progress-bar-animated" >25%</div>

</div>

Vamos a ver los resultados de estos pequeños códigos:

Como podemos observar el resultado es espectacular con el código que necesita y los resultados que podemos ofrecer son realmente interesantes.