¿Qué clases contextuales se utilizan con las barras de progreso en Bootstrap?

Una barra de progreso se utiliza para mostrar el progreso de un proceso en una computadora. Una barra de progreso 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. Bootstrap proporciona muchos tipos de barras de progreso.

Sintaxis:   

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

Ejemplo 1:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Progress Bar</title>
    <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">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
      </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
      </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
      </script>
</head>
  
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
    <div class="container">
        <div class="progress">
            <div class="progress-bar" style="width:80%"></div>
        </div>
    </div>
</body>
  
</html>

Producción:

Aprenderemos sobre las clases contextuales en la barra de progreso: Las clases contextuales que se pueden usar con las barras de progreso son:

  • .bg-éxito
  • .bg-info
  • .bg-advertencia
  • .bg-peligro

En lenguaje sencillo; podemos dar diferentes colores a la barra de progreso.

  • Éxito:  Tono de color verde (#5cb85c)
  • Peligro: Sombra de color rojo (#d9534f)
  • Advertencia: tono de color amarillo ( #f0ad4e)
  • Información: Tono de color azul (#5bc0de)

NOTA: El color predeterminado de la barra de progreso es azul.

Ejemplo 2:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Progress Bar</title>
    <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">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
      </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
      </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
      </script>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <div class="container">
        <div class="progress">
            <div class="progress-bar" style="width:30%;">
                30% Complete (Default)
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar bg-success" 
                 role="progressbar" aria-valuenow="40" 
                 aria-valuemin="0" aria-valuemax="100" 
                 style="width:40%">
                40% Complete (success)
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar bg-info" 
                 role="progressbar" aria-valuenow="50" 
                 aria-valuemin="0" aria-valuemax="100" 
                 style="width:50%">
                50% Complete (info)
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar bg-warning" 
                 role="progressbar" aria-valuenow="60" 
                 aria-valuemin="0" aria-valuemax="100" 
                 style="width:60%">
                60% Complete (warning)
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar bg-danger" 
                 role="progressbar" aria-valuenow="70" 
                 aria-valuemin="0" aria-valuemax="100" 
                 style="width:70%">
                70% Complete (danger)
            </div>
        </div>
    </div>
</body>
  
</html>

Producción: 

Publicación traducida automáticamente

Artículo escrito por akshitsaxenaa09 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 *