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