Bootstrap 4 - Progreso
Descripción
La barra de progreso muestra el progreso de un proceso con barras apiladas, fondos animados y etiquetas de texto.
Barra de progreso básica
La barra de progreso básica se puede crear agregando el elemento <div> con una clase de .progress y agregando la clase .progress-bar dentro de su elemento secundario. Agregue un atributo de estilo con el ancho expresado como porcentaje. Digamos, por ejemplo, style = "60%"; indica que la barra de progreso estaba al 60%.
El siguiente ejemplo demuestra esto:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Basic Progress Bar</h2>
<br>
<div class = "progress">
<div class = "progress-bar" style = "width:85%"></div>
</div>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Altura de la barra de progreso y etiquetas
Puede cambiar la altura de la barra de progreso estableciendo el valor de la propiedad de altura . Coloque el texto dentro de la clase .progress-bar para agregar la etiqueta de la barra de progreso. El siguiente ejemplo demuestra esto:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Progress Bar Height</h2>
<div class = "progress" style = "height: 15px;">
<div class = "progress-bar" role = "progressbar" style = "width: 35%;"
aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"></div>
</div>
<br>
<div class = "progress" style = "height: 25px;">
<div class = "progress-bar" role = "progressbar" style = "width: 55%;"
aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"></div>
</div>
<br>
<div class = "progress" style = "height: 30px;">
<div class = "progress-bar" role = "progressbar" style = "width: 75%;"
aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"></div>
</div>
<br>
<h2>Progress Bar Labels</h2>
<div class = "progress">
<div class = "progress-bar" role = "progressbar" style = "width: 55%;"
aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100">
55% Complete
</div>
</div>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Barras de progreso de colores
El color de las barras de progreso se puede cambiar mediante el uso de clases contextuales como bg-success , bg-info , bg-warning y bg-danger como se muestra en el siguiente ejemplo:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Colored Progress Bars</h2>
<div class = "progress">
<div class = "progress-bar bg-success" role = "progressbar"
style = "width: 15%" aria-valuenow = "15" aria-valuemin = "0"
aria-valuemax = "100"></div>
</div>
<br>
<div class = "progress">
<div class = "progress-bar bg-info" role = "progressbar"
style = "width: 35%" aria-valuenow = "35" aria-valuemin = "0"
aria-valuemax = "100"></div>
</div>
<br>
<div class="progress">
<div class = "progress-bar bg-warning" role = "progressbar"
style = "width: 65%" aria-valuenow = "65" aria-valuemin = "0"
aria-valuemax = "100"></div>
</div>
<br>
<div class = "progress">
<div class = "progress-bar bg-danger" role = "progressbar"
style = "width: 95%" aria-valuenow = "95" aria-valuemin = "0"
aria-valuemax = "100"></div>
</div>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Barras de progreso a rayas
Puede agregar franjas a las barras de progreso agregando la clase .progress-bar-striped en el elemento <div> con una clase de .progress-bar .
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Striped Progress Bars</h2>
<div class = "progress">
<div class = "progress-bar progress-bar-striped" style = "width:20%"></div>
</div>
<br>
<div class = "progress">
<div class = "progress-bar bg-success progress-bar-striped"
style = "width:30%"></div>
</div>
<br>
<div class = "progress">
<div class = "progress-bar bg-info progress-bar-striped"
style = "width:40%"></div>
</div>
<br>
<div class = "progress">
<div class = "progress-bar bg-warning progress-bar-striped"
style = "width:50%"></div>
</div>
<br>
<div class = "progress">
<div class = "progress-bar bg-danger progress-bar-striped"
style = "width:60%"></div>
</div>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Barras de progreso animadas
Puede agregar animación a las barras de progreso agregando la clase .progress-bar-animated en el elemento <div> con una clase de .progress-bar .
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Animated Progress Bars</h2>
<div class = "progress">
<div class = "progress-bar progress-bar-striped progress-bar-animated"
style = "width:30%"></div>
</div>
<br>
<div class = "progress">
<div class = "progress-bar bg-success progress-bar-striped progress-bar-animated"
style = "width:60%"></div>
</div>
<br>
<div class = "progress">
<div class = "progress-bar bg-info progress-bar-striped progress-bar-animated"
style = "width:90%"></div>
</div>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin =" anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Varias barras de progreso
Incluso puede apilar varias barras de progreso. Coloque las múltiples barras de progreso en la misma clase .progress para apilarlas como se ve en el siguiente ejemplo:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Multiple Progress Bars</h2>
<div class = "progress">
<div class = "progress-bar bg-success" role = "progressbar"
style = "width: 40%" aria-valuenow = "20" aria-valuemin = "0"
aria-valuemax = "100"></div>
<div class = "progress-bar bg-warning" role = "progressbar"
style = "width: 20%" aria-valuenow = "35" aria-valuemin = "0"
aria-valuemax = "100"></div>
<div class = "progress-bar bg-info" role = "progressbar"
style = "width: 15%" aria-valuenow = "45" aria-valuemin = "0"
aria-valuemax = "100"></div>
</div>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado: