¿Cómo crear una barra de progreso en diferentes colores en Bootstrap?

Bootstrap 5 es el último lanzamiento importante de Bootstrap en el que renovaron la interfaz de usuario y realizaron varios cambios. La barra de progreso es una representación pictórica que informa sobre los detalles de cualquier objetivo o tarea, es decir, se utiliza para representar el progreso de una tarea o cualquier operación que muestra cuánto del proceso se completó y cuánto queda. Puede agregar una barra de progreso en una página web utilizando clases de arranque predefinidas. En este artículo, aprenderemos cómo crear una barra de progreso con un color diferente usando clases predefinidas de Bootstrap.

Sintaxis:

<div class="progress">Contents<div>

La barra de progreso en bootstrap se puede crear en diferentes colores. Hay dos métodos para cambiar el color de la barra de progreso en bootstrap.

Método 1: Usar tipo bg:

Podemos agregar la clase bg-type en el div de progreso para cambiar su color. Hay 8 tipos de opciones de personalización de color disponibles en bootstrap5:

  • bg-primario
  • bg-secundario
  • bg-éxito
  • bg-peligro
  • bg-advertencia
  • bg-info
  • bg-luz
  • bg-oscuro

Ejemplo: Este ejemplo ilustra algunas barras de progreso básicas en diferentes colores. Estas barras de progreso significan una emoción a través de sus colores de fondo, como éxito, peligro y neutralidad. Para crear una parte de la barra de progreso en un color diferente, siga agregando un nuevo div con la barra de progreso de clase dentro del progreso.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
 
<body>
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <br />
        <div class="progress" style="max-width: 60%">
            <div class="progress-bar"
                style="width: 10%">10%
            </div>
            <div class="progress-bar bg-success"
                style="width: 20%">20%
            </div>
            <div class="progress-bar bg-danger
                progress-bar-stripped" style="width: 30%">
                30%
            </div>
            <div class="progress-bar bg-warning
                progress-bar-stripped" style="width: 40%">
                40%
            </div>
        </div>
    </center>
</body>
 
</html>

Producción:

Método 2: Usando la propiedad de color de fondo de CSS:

Podemos cambiar el color de la barra de progreso a cualquier color deseado usando el parámetro de estilo con la propiedad de color de fondo. Para crear una parte de la barra de progreso en un color diferente, siga agregando un nuevo div con la barra de progreso de clase dentro del progreso.

Ejemplo: aquí, cambiaremos el color de la barra de progreso usando colores definitivos con la ayuda de sus códigos hexadecimales, nombre o valores RGB.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
 
<body>
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <br />
        <div class="progress" style="max-width: 60%">
            <div class="progress-bar"
                style="width: 80%; background-color: green">
            </div>
            <div class="progress-bar progress-bar-stripped"
                style="width: 80%; background-color: #66b400">
            </div>
            <div class="progress-bar progress-bar-stripped"
                style="width: 70%; background-color: rgb(141, 3, 72)">
            </div>
        </div>
        <br />
    </center>
</body>
 
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *