Estilización de la barra de progreso en Bootstrap 5
Cómo crear una barra de progreso
Con el fin de generar una barra de progreso, establezca el .progreso clase para el elemento predecesor mientras tanto, da .barra de progreso al elemento sucesor, mientras que el ancho de la barra de progreso se ajusta utilizando la propiedad de ancho.
Html
El padre Div recibió el .clase de progreso mientras que el niño div recibió el .clase de barra de progreso. Por último, utilizando la propiedad de ancho, el ancho de la barra de progreso se estableció en 50%.
Producción
Se generó una barra de progreso con éxito.
Ahora aprendamos varias formas en que puedes diseñar una barra de progreso.
Cómo escalar una barra de progreso
Por defecto, una barra de progreso tiene una altura de 16 px o 1rem, pero dependiendo de su preferencia puede escalar la altura de la barra de progreso hacia arriba y hacia abajo. Para este propósito, establece la misma altura para el predecesor Div y el sucesor Div.
Html
El código anterior generará dos barras de progreso, una con una altura de 20 px y la segunda con altura de 40 px. Tenga en cuenta que el contenedor de progreso y la barra de progreso se asignaron la misma altura en ambos casos.
Producción
La salida muestra dos barras de progreso con diferentes alturas.
Cómo etiquetar una barra de progreso
Dado que sabemos que una barra de progreso muestra el progreso de un proceso, por lo tanto, si desea mostrar este progreso en números o porcentaje, simplemente escriba un texto dentro del niño div.
Html
50%
La barra de progreso que se está creando en el código anterior tiene una etiqueta que dice "50%". Esta etiqueta corresponde al progreso del proceso.
Producción
Una etiqueta fue asignada con éxito a la barra de progreso.
Cómo colorear una barra de progreso
Si desea proporcionar colores a una barra de progreso, simplemente asigne las clases de color de fondo al contenedor de la barra de progreso. Las clases de color de fondo son .BG-Primary, .bisco, .BG-SECUDARY, .BG-Info, .BG-WARNING, .BG-Danger, .BG-Light, .BG-Dark, .BG-MUTUT.
Html
Aquí estamos creando cinco barras de progreso cada una con un ancho y color diferentes.
Producción
Proporcionar colores a las barras de progreso se sumará a la belleza del sitio web.
Cómo crear una barra de progreso a rayas
Otra cosa divertida que puedes hacer para diseñar una barra de progreso es hacerlo rayado y para hacerlo asignar el .rayado de la barra de progreso clase para el contenedor infantil.
Html
El código anterior generará una barra de progreso a rayas con 50% de ancho.
Producción
Así es como se crea una barra de progreso a rayas.
Cómo animar una barra de progreso
Animar una barra de progreso hará que el progreso dentro de la barra parezca moverse. Esto se puede hacer proporcionando el .animado por la barra de progreso clase de la barra de progreso junto con el .rayado de la barra de progreso clase.
Html
Aquí estamos creando una barra de progreso animado a rayas con 50% de ancho.
Producción
Se ha creado una barra de progreso animado.
Cómo apilar múltiples barras de progreso
Si desea apilar múltiples barras de progreso, simplemente colóquelas dentro del contenedor de progreso.
Html
Primero
Segundo
Tercero
El código anterior apilará tres barras de progreso cada una con un ancho diferente.
Producción
La salida anterior muestra tres barras de progreso apiladas.
Conclusión
En Bootstrap 5, se puede crear una barra de progreso asignando .progreso clase para el contenedor principal, y .barra de progreso clase para el contenedor infantil. Escala la altura de una barra de progreso asignando la misma altura a los contenedores de padres e hijos. Una barra de progreso se puede etiquetar colocando algún texto dentro de él, además, para crear coloridas barras de progreso utilizando las clases de color de fondo. Además, puede crear barras de progreso a rayas y animadas utilizando el .rayado de la barra de progreso, y .animado por la barra de progreso clases respectivamente.