En este artículo, sabremos cómo crear la barra de progreso apilada con la etiqueta usando Bootstrap. Bootstrap 5 es el último lanzamiento importante de Bootstrap en el que han renovado la interfaz de usuario y han realizado varios cambios. 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. Podemos agregar una barra de progreso en una página web usando clases de arranque predefinidas. Bootstrap proporciona muchos tipos de barras de progreso y también admite varias barras de progreso personalizadas que incluyen la barra de progreso apilada y la barra de progreso animada.
Mediante el uso de la barra de progreso de Bootstrap, los usuarios pueden identificar rápidamente el estado de las tareas ejecutadas para un proceso en particular. Por ejemplo, si un usuario está descargando algo, la barra de progreso mostrará el estado de finalización o el progreso de esa descarga en curso. Un caso similar puede pensar para cargar, etc.
Sintaxis:
<div class="progress"> Contents <div>
Enfoque: Para crear una barra de progreso:
- Use el progreso de la clase dentro de una clase div.
- Dentro de la clase div ya creada, agregue otra etiqueta div con una clase .progress-bar . Aquí, bg-success se usa para mostrar el progreso.
- Mencione el progreso de la barra bajo un atributo de estilo usando el ancho como un porcentaje. Por ejemplo, estilo = «ancho: 50%
Ejemplo 1: este ejemplo ilustra la barra de progreso predeterminada en Bootstrap.
HTML
<!DOCTYPE html> <html> <head> <!-- Load Bootstrap --> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> </head> <body style="text-align: center"> <div class="container mt-3" style="width: 700px"> <h1 style="color: green"> GeeksforGeeks </h1> <h4>Progress Bar</h4> <div class="progress"> <div class="progress-bar bg-success" style="width: 60%"> </div> </div> </div> </body> </html>
Producción:
Ahora, seguiremos los pasos a continuación para construir nuestra barra de progreso apilada.
Paso 1: descargue la última versión de Bootstrap o podemos incluir directamente el enlace CDN de Bootstrap en la etiqueta <head>.
<!–Bootstrap CSS plugin–>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css” rel=”stylesheet” integridad=”sha384 -EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anónimo”><!–Complemento de JavaScript Bootstrap–>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js” integridad=”sha384-MrcW6ZMFYlzcLA8Nl+ NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM” crossorigin=”anónimo”></script>
Paso 2: declara la clase como un contenedor con valores como .progress en el <div> externo.
<div class="progress">
<div></div>
<div></div>
</div>
Paso 3: agregue la clase .progress-bar al contenedor interno <div>. Para especificar el ancho de la barra de progreso, podemos usar la clase de arranque predefinida para el ancho que establecerá el ancho de la barra. Por ejemplo, w-25 p-3 establecerá el ancho del 25%, w-50 p-3 establecerá el ancho del 50% y así sucesivamente.
<div class="progress">
<div class="progress-bar bg-success w-25 p-3">
Progress 1
</div>
<div class="progress-bar bg-success w-50 p-3">
Progress 2
</div>
</div>
Paso 4: para la barra de progreso apilada etiquetada, el texto dentro de la barra de progreso de la pila mostrará la finalización de múltiples tareas en porcentaje.
Ejemplo 2: este ejemplo ilustra la barra de progreso apilada etiquetada con Bootstrap v5.0.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Bootstrap 5 Labelled Stacked Progress Bar </title> <meta charset="utf-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous" /> </head> <body style="text-align: center"> <div class="container mt-5"> <h1 class="text-success">GeeksforGeeks</h1> <h3 class="text-secondary"> Labelled Stacked Progress Bar </h3> <br /> <div class="progress" style="height: 30px"> <div class="progress-bar bg-primary w-25 p-3"> Progress 15% </div> <div class="progress-bar bg-info w-50 p-3"> Progress 35% </div> <div class="progress-bar bg-secondary w-25 p-3"> Progress 12% </div> <div class="progress-bar bg-success w-50 p-3" role=""> Progress 38% </div> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por omkarbhusnale y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA