44. Progress bar en Bootstrap 5: Crea barras de progreso para indicar el avance de una tarea

Las barras de progreso se utilizan para mostrar el progreso de una tarea en un sitio web. En este tema, aprenderás a crear barras de progreso con Bootstrap 5, incluyendo cómo personalizar la apariencia y cómo utilizar animaciones para hacerlas más interactivas.

Tema anterior Siguiente tema

1 comentarios

Inicia sesión para comentar

Iniciar sesión

Comentarios:

  • Darcy Frynet Embus Quina

    Darcy Frynet Embus Quina hace 1 año

    buenas tardes, no me funciona progress-bar-animated

    • Cesar Enrique (y4f3r0) hace 1 año

      <!DOCTYPE html>

      <html lang="es">

      <head>

          <meta charset="UTF-8">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <title>Boostrap - Componentes 2 - Navs</title>

          <!--Bootstrap-->

          <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

      </head>

      <body>

          <div class="container py-4"> 

              <div class="progress mb-2" style="height: 30px;">

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

              </div>

              <hr>

              <div>

                  <div class="progress mb-2">

                      <div class="progress-bar bg-danger w-25">25%</div>

                  </div>

                  <div class="progress mb-2">

                      <div class="progress-bar bg-info w-50">50%</div>

                  </div>

                  <div class="progress mb-2">

                      <div class="progress-bar bg-warning w-75">75%</div>

                  </div>

                  <div class="progress mb-2">

                      <div class="progress-bar w-100">100%</div>

                  </div>

              </div>

              <hr>

              <div>

                  <div class="progress mb-2">

                      <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger w-25">25%</div>

                  </div>

                  <div class="progress mb-2">

                      <div class="progress-bar progress-bar-striped progress-bar-animated bg-info w-50">50%</div>

                  </div>

                  <div class="progress mb-2">

                      <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning w-75">75%</div>

                  </div>

                  <div class="progress mb-2">

                      <div class="progress-bar progress-bar-striped progress-bar-animated w-100">100%</div>

                  </div>

              </div>

          </div>

          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

      </body>

      </html>