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:
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:
Altura de la barra de progreso: use la propiedad CSS para cambiar la altura de la barra de progreso. La altura predeterminada del progreso es 16px. La altura del contenedor de progreso y barra de progreso debe ser la misma.
Sintaxis:
<div class="progress" style="height:30px;">
<div class="progress-bar" style="width:x%";height30px;></div>
<div>
Ejemplo:
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" style="height:30px;"> <div class="progress-bar" style="width:80%;height:30px;"> </div> </div> </div> </body> </html>
Producción:
Barra de progreso etiquetada: la barra de progreso etiquetada se usa para mostrar el texto dentro de la barra de progreso para mostrar el porcentaje de finalización de la tarea.
Sintaxis:
<div class="progress">
<div class="progress-bar" style="width:x%">x%</div>
<div>
Ejemplo:
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:80%;"> 80% </div> </div> </div> </body> </html>
Producción:
Barras de progreso coloreadas: use las clases de fondo contextuales de Bootstrap 4 para establecer el color de la barra de progreso. El color predeterminado de la barra de progreso es azul.
Sintaxis:
<div class="progress">
<div class="progress-bar bg-*" style="width:x%">x%</div>
<div>
Ejemplo:
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:50%;"> 50% </div> </div><br> <div class="progress"> <div class="progress-bar bg-success" style="width:90%;"> 90% </div> </div><br> <div class="progress"> <div class="progress-bar bg-warning" style="width:30%;"> 30% </div> </div><br> <div class="progress"> <div class="progress-bar bg-danger" style="width:10%;"> 10% </div> </div><br> <div class="progress"> <div class="progress-bar bg-info" style="width:70%;"> 70% </div> </div><br> </div> </body> </html>
Producción:
Barras de progreso eliminadas: la clase .progress-bar-stripped se usa para agregar franjas a las barras de progreso. Use la combinación de las clases .progress-bar y .progress-bar-stripped para crear una barra de progreso eliminada. Use las clases de fondo contextuales de Bootstrap 4 para establecer el color de la barra de progreso.
Sintaxis:
<div class="progress">
<div class="progress-bar progress-bar-stripped" style="width:x%">
x%
</div>
<div>
Ejemplo:
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 progress-bar-stripped" style="width:50%;"> 50% </div> </div><br> <div class="progress"> <div class="progress-bar bg-success progress-bar-stripped" style="width:90%;"> 90% </div> </div><br> <div class="progress"> <div class="progress-bar bg-warning progress-bar-stripped" style="width:30%;"> 30% </div> </div><br> <div class="progress"> <div class="progress-bar bg-danger progress-bar-stripped" style="width:10%;"> 10% </div> </div><br> <div class="progress"> <div class="progress-bar bg-info progress-bar-stripped" style="width:70%;"> 70% </div> </div><br> </div> </body> </html>
Producción:
Barra de progreso animada: la clase .progress-bar-animated se usa para crear una barra de progreso animada. Use la combinación de .progress-bar, progress-bar-stripped y progress-bar-animated para crear una barra de progreso animada.
Sintaxis:
<div class="progress">
<div class="progress-bar progress-bar-stripped progress-bar-animated"
style="width:x%">
x%
</div>
<div>
Ejemplo:
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 progress-bar-stripped progress-bar-animated" style="width:50%;"> 50% </div> </div><br> <div class="progress"> <div class="progress-bar bg-success progress-bar-stripped progress-bar-animated" style="width:90%;"> 90% </div> </div><br> <div class="progress"> <div class="progress-bar bg-warning progress-bar-stripped progress-bar-animated" style="width:30%;"> 30% </div> </div><br> <div class="progress"> <div class="progress-bar bg-danger progress-bar-stripped progress-bar-animated" style="width:10%;"> 10% </div> </div><br> <div class="progress"> <div class="progress-bar bg-info progress-bar-stripped progress-bar-animated" style="width:70%;"> 70% </div> </div><br> </div> </body> </html>
Producción:
Múltiples barras de progreso: se pueden apilar varias barras de progreso para mostrar barras de progreso de diferentes colores.
Ejemplo:
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:10%;"> 10% </div> <div class="progress-bar bg-success" style="width:20%;"> 20% </div> <div class="progress-bar bg-warning" style="width:30%;"> 30% </div> <div class="progress-bar bg-danger" style="width:30%;"> 30% </div> </div> </div> </body> </html>
Producción:
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por Dharmendra_Kumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA