Bootstrap 4 - Progrès
La description
La barre de progression montre la progression d'un processus avec des barres empilées, des arrière-plans animés et des étiquettes de texte.
Barre de progression de base
La barre de progression de base peut être créée en ajoutant l'élément <div> avec une classe de .progress et en ajoutant la classe .progress-bar à l' intérieur de son élément enfant. Ajoutez un attribut de style dont la largeur est exprimée en pourcentage. Dites par exemple, style = "60%"; indique que la barre de progression était à 60%.
L'exemple suivant illustre ceci -
Exemple
<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>Il produira le résultat suivant -
Production
Hauteur et étiquettes de la barre de progression
Vous pouvez modifier la hauteur de la barre de progression en définissant la valeur de la propriété height . Placez le texte dans la classe .progress-bar pour ajouter l'étiquette de la barre de progression. L'exemple suivant illustre ceci -
Exemple
<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>Il produira le résultat suivant -
Production
Barres de progression colorées
La couleur des barres de progression peut être modifiée en utilisant des classes contextuelles telles que bg-success , bg-info , bg-warning et bg-danger comme indiqué dans l'exemple ci-dessous -
Exemple
<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>Il produira le résultat suivant -
Production
Barres de progression rayées
Vous pouvez ajouter des bandes aux barres de progression en ajoutant la classe .progress-bar-striped dans l'élément <div> avec une classe de .progress-bar .
Exemple
<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>Il produira le résultat suivant -
Production
Barres de progression animées
Vous pouvez ajouter une animation aux barres de progression en ajoutant une classe .progress-bar-animated dans l'élément <div> avec une classe de .progress-bar .
Exemple
<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>Il produira le résultat suivant -
Production
Barres de progression multiples
Vous pouvez même empiler plusieurs barres de progression. Placez les multiples barres de progression dans la même classe .progress pour les empiler comme indiqué dans l'exemple suivant -
Exemple
<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>Il produira le résultat suivant -