TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear barras de progreso de Bootstrap 5?

772

Las barras de progreso se utilizan para mostrar habilidades, porcentaje de finalización de proyectos y para propósitos similares. Bootstrap 5 tiene diferentes estilos de barras de progreso similares a las versiones anteriores. En este tutorial, exploremos más sobre cada tipo de barras de progreso que se ofrecen en Bootstrap 5.

Tutorial de barras de progreso de Bootstrap 5

  1. Barras de progreso de HTML5
  2. Bootstrap barra de progreso clases CSS
  3. Crear barras de progreso predeterminadas
  4. Barras de progreso con diferentes colores de fondo
  5. Agregar etiquetas en las barras de progreso
  6. Varias barras de progreso
  7. Estilo rayado
  8. Estilo de rayas animado
  9. Ajuste de altura

Discutamos cada tema en detalle.

1 barras de progreso HTML5

Recuerde que HTML5 tiene una etiqueta predeterminada para crear barras de progreso horizontales, lo cual es suficiente en la mayoría de los casos. A continuación se muestra el bloque de código de las barras de progreso de HTML5.

<progress value="50" max="100">50 %</progress><br /> <progress value="60" max="100">60 %</progress><br /> <progress value="70" max="100">70 %</progress><br /> <progress value="80" max="100">80 %</progress><br />

Se verá a continuación en el navegador:

50%

60%

70%

80%

Bootstrap no usa la barra de progreso HTML5 y tiene su propio estilo para el componente de la barra de progreso.

2 clases de CSS utilizadas en las barras de progreso de Bootstrap

Bootstrap 4 usa las siguientes clases CSS para crear barras de progreso:

  • La clase ".progress" se usa para el contenedor externo de la barra de progreso. Se usa para contener múltiples barras de progreso dentro del contenedor.
  • La clase ".progress-bar" se utiliza para crear una barra de progreso real para mostrar el porcentaje de progreso.
  • El ancho de cada barra de progreso debe definirse explícitamente con clases CSS adicionales.
  • Además, puede agregar atributos de "rol" y "aria" a la barra de progreso para facilitar la lectura.
  • “Aria-valuenow" se usa para indicar el valor de progreso actual, “aria-valuemin” es el valor mínimo que es 0 y “aria-valuemax” es el valor máximo que es 100.

Creemos algunos ejemplos usando estas clases.

3 barras de progreso predeterminadas

La barra de progreso predeterminada utiliza el color principal para mostrar el progreso y el gris claro para el fondo. A continuación se muestra el código para crear cinco barras de progreso con 0, 25, 50, 75 y 100% de progreso.

<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>

Se verá a continuación en el navegador:

Como se mencionó anteriormente, cada barra de progreso debe tener un ancho definido explícitamente para mostrar la finalización. Puede utilizar clases de utilidad o estilo en línea para este propósito. Hemos utilizado las clases de dimensionamiento de servicios públicos para 25%, 50% y 75% con w-25, w-50 y w-75 respectivamente. Para un ancho del 100%, hemos utilizado un estilo en línea con "ancho: 100%".

También recuerde agregar un salto de línea manual entre las barras de progreso para evitar que todas las barras se muestren en la misma línea.

4 barras de progreso con fondos

Al igual que muchos otros componentes, puede usar las clases de utilidad de fondo para cambiar el fondo a éxito, advertencia, información, peligro, colores oscuros o secundarios.

<div class="progress"> <div class="progress-bar w-25 bg-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-50 bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-75 bg-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="80"></div> </div> <div class="progress"> <div class="progress-bar bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="90"></div> </div> <div class="progress"> <div class="progress-bar bg-secondary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="60"></div> </div>

Las barras de progreso se verán a continuación:

¿Cómo crear barras de progreso de Bootstrap 5?

Tenga en cuenta que el color primario es el valor predeterminado, por lo que no necesita mencionar si desea que el progreso sea en color primario. Además, no puede usar un color de fondo claro, ya que el fondo de la barra de progreso también es de color claro.

Puede usar clases de utilidad en segundo plano en el contenedor de progreso externo para cambiar el fondo de la barra de progreso. Por ejemplo, el siguiente código producirá la barra de progreso con un fondo de color rojo (peligro) en lugar de gris claro.

<div class="progress bg-danger"> <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div>

El resultado se verá a continuación en el navegador:

¿Cómo crear barras de progreso de Bootstrap 5?

5 barras de progreso con etiquetas

Si desea agregar las etiquetas a la barra de progreso, simplemente agregue el texto antes del cierre

etiqueta de cada barra de progreso. A continuación se muestra un ejemplo para mostrar el 75% de finalización:

<div class="progress"> <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75% Completed</div> </div>

La etiqueta se mostrará en la parte superior de la barra con una alineación central como se muestra a continuación:

¿Cómo crear barras de progreso de Bootstrap 5?

6 barras de progreso múltiples

Agregar varias barras de progreso dentro de un solo envoltorio exterior creará todas las barras en una sola línea.

<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div> <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div> <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div> </div>

Las múltiples barras de progreso se verán a continuación:

¿Cómo crear barras de progreso de Bootstrap 5?

7 barras de progreso a rayas

La clase ".progress-bar-striped" se usa para crear barras de progreso con bandas (la clase de utilidad de fondo se usa para mostrar diferentes colores).

<div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div> </div>

Las barras de progreso con rayas deberían verse a continuación:

¿Cómo crear barras de progreso de Bootstrap 5?

8 barras de progreso de rayas animadas

La última opción es animar la franja usando la clase ".progress-bar-animated".

<div class="progress"> <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">50%</div> </div>

Esto creará una barra de progreso animada con franjas verdes. Recuerde que solo puede animar las barras rayadas y no las predeterminadas.

9 Cambio de altura o grosor de las barras de progreso

Por defecto, las barras de progreso tendrán una altura de 1rem. Puede cambiar la altura usando el estilo en línea dentro de la clase ".progress-bar" y el contenedor externo se alineará automáticamente en consecuencia. Creemos dos barras con 0.rem y 30px de altura:

<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 50%; height: 0.5rem;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div><br> <div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 75%; height: 30px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div>

El resultado debería ser el siguiente en el navegador:

¿Cómo crear barras de progreso de Bootstrap 5?

El problema al cambiar la altura es que las etiquetas cuando se usan no se alinean correctamente. Nuevamente, debe usar estilos adicionales manualmente para alinear las etiquetas en el centro vertical.


Aprenda Bootstrap 5 (índice )


Fuente de grabación: www.webnots.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More