¿Cómo crear una barra de progreso usando bootstrap?

Posted on by Rudeus Greyrat

Bootstrap es un marco de código abierto que se utiliza para diseñar sitios web receptivos que es fácil y eficiente de usar. Tiene plantillas listas para usar que se pueden usar para diseñar páginas web en un tiempo limitado.

¿Qué es una barra de progreso?

Una barra de progreso se usa siempre que se necesita una interfaz visual para mostrar el progreso en una tarea en particular. Digamos, «¿Cuánto porcentaje de archivo se ha descargado o cuánto porcentaje de estudiantes aprobaron un examen?».

Para este propósito, Bootstrap tiene un componente de barra de progreso que se puede usar en las páginas web. Todas las versiones de bootstrap admiten el componente de barra de progreso.

  
 ¿Cómo agregar una barra de progreso usando bootstrap? 

  1. Visita la página oficial de Bootstrap aquí . En el lado derecho, se puede seleccionar la versión de arranque adecuada según los requisitos. Pero se recomienda usar la última versión ya que tiene nuevas funciones integradas.
  2. En el panel lateral izquierdo, en la sección Componentes, se puede ver la pestaña Progreso. En la pestaña de progreso se pueden ver los componentes de la barra de progreso.
  3. Ahora la plantilla presente se puede usar directamente. Esto se puede hacer colocando la plantilla en la sección del cuerpo de la página html.

 Ejemplo 1: se puede usar la plantilla de inicio de la pestaña de documentación de bootstrap. 

HTML

<!doctype html>
<html lang="en">
 
<head>
    <!-- Bootstrap CSS and JS -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
          crossorigin="anonymous">
 
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            crossorigin="anonymous">
      </script>
</head>
 
<body>
    <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" role="progressbar"
            style="width: 25%" aria-valuenow="25"
            aria-valuemin="0"
            aria-valuemax="100">
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar"
            style="width: 50%" aria-valuenow="50"
            aria-valuemin="0"
            aria-valuemax="100">
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar"
            style="width: 75%" 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>
</body>
 
</html>

Salida: La siguiente barra de progreso se puede ver en la página web.

Ejemplo 2: podemos mostrar el porcentaje de la barra de progreso escribiéndolo entre los div de la barra de progreso.

Sintaxis:

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

Código:

HTML

<!doctype html>
<html lang="en">
 
<head>
    <!-- Bootstrap CSS and JS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous">
    </script>
</head>
 
<body>
    <h2>Bootstrap Progress Bar</h2>
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
      </div>
</body>
 
</html>

Producción: 

NOTA: El valor del progreso se puede cambiar en el código según el requisito.

Apariencia

Podemos cambiar la apariencia de la barra de progreso utilizando las clases de utilidades de fondo de arranque como «bg-info» , «bg-success» , «bg-warning» y muchas más.

Sintaxis:

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

Aquí hay un ejemplo de código en el que hemos hecho barras de progreso de diferentes colores usando diferentes clases de utilidades de fondo.

Código:

HTML

<!doctype html>
<html lang="en">
 
<head>
    <!-- Bootstrap CSS and JS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous">
    </script>
</head>
 
<body>
    <h2>Bootstrap Progress Bar</h2>
    <div class="progress" style="margin: 5px;">
        <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="20" aria-valuemin="0"
            aria-valuemax="100">
        </div>
    </div>
    
    <div class="progress" style="margin: 5px;">
        <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
            aria-valuemax="100"></div>
    </div>
    <div class="progress" style="margin: 5px;">
        <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
            aria-valuemax="100"></div>
    </div>
    <div class="progress" style="margin: 5px;">
        <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0"
            aria-valuemax="100"></div>
    </div>
    <div class="progress" style="margin: 5px;">
        <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
            aria-valuemax="100"></div>
    </div>
 
</body>
 
</html>

Producción:

Barra de progreso Bootstrap en diferentes apariencias

Barra de progreso eliminada

Podemos hacer una barra de progreso eliminada usando la clase «barra-de-progreso-despojada» junto con la clase «barra-de-progreso» en el componente.

Sintaxis:

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

Código:

HTML

<!doctype html>
<html lang="en">
 
<head>
    <!-- Bootstrap CSS and JS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous">
    </script>
</head>
 
<body>
    <h2>Bootstrap Stripped Progress Bar</h2>
 
    <div class="progress" style="margin: 5px;">
        <div class="progress-bar progress-bar-stripped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="progress" style="margin: 5px;">
        <div class="progress-bar progress-bar-stripped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="progress" style="margin: 5px;">
        <div class="progress-bar progress-bar-stripped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="progress" style="margin: 5px;">
        <div class="progress-bar progress-bar-stripped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="progress" style="margin: 5px;">
        <div class="progress-bar progress-bar-stripped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
 
</body>
 
</html>

Producción:

Barra de progreso eliminada Bootstrap

Barra de progreso animada

Podemos hacer una barra de progreso animada usando la clase «barra de progreso animada» junto con la clase «barra de progreso» en el componente.

Sintaxis:

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

Código:

HTML

<!doctype html>
<html lang="en">
 
<head>
    <!-- Bootstrap CSS and JS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous">
    </script>
</head>
 
<body>
    <h2>Bootstrap Animated Progress Bar</h2>
    <div class="progress">
        <div class="progress-bar progress-bar-stripped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
      </div>
 
</body>
 
</html>

Producción:

Barra de progreso animada Bootstrap

Navegadores compatibles:

  • Google Chrome
  • Ópera
  • Safari
  • Mozilla Firefox
  • navegador valiente

Publicación traducida automáticamente

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