Barres de progression Les barres de progression constituent une façon élégante de faire patienter l’utilisateur pendant une longue tâche. Elles ont aussi pour vocation de le rassurer et de lui indiquer approximativement le temps qu’il lui reste à attendre. Les classes progress et progress-bar permettent de réaliser facilement ce genre d’effet. Pour les exemples, je prévois un peu de code javascript pour simuler un processus temporel. Voici la barre de base :
.progress
dans le conteneur, comme <div>.<div class="container">
<h3 class="text-success">bg-info</h3>
<div class="progress">
<div class="progress-bar bg-info w-75"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100">50%
</div>
</div>
<h5 class="text-success">bg-success</h5>
<div class="progress">
<div class="progress-bar bg-success"
style="width:33%"
role="progressbar"
aria-valuenow="33"
aria-valuemin="0"
aria-valuemax="100">33%
</div>
</div>
<h5 class="text-success">bg-warning</h5>
<div class="progress">
<div class="progress-bar bg-warning w-50"
role="progressbar"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100">50%
</div>
</div>
<h5 class="text-success">bg-danger</h5>
<div class="progress">
<div class="progress-bar bg-danger"
style="width:52%"
role="progressbar"
aria-valuenow="52"
aria-valuemin="0"
aria-valuemax="100">52%
</div>
</div>
<h5 class="text-success">bg-light</h5>
<div class="progress">
<div class="progress-bar bg-light w-25"
role="progressbar"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100">25%
</div>
</div>
<h5 class="text-success">bg-dark</h5>
<div class="progress">
<div class="progress-bar bg-dark"
style="width:65%">65%
</div>
</div>
<h5 class="text-success">bg-primary</h5>
<div class="progress">
<div class="progress-bar bg-primary"
style="width:77%"
role="progressbar"
aria-valuenow="77"
aria-valuemin="0"
aria-valuemax="100">77%
</div>
</div>
<h5 class="text-success">bg-secondary</h5>
<div class="progress">
<div class="progress-bar bg-secondary"
style="width:64%">64%
</div>
</div>
</div>
<div class="container">
<h3>Barres de progression multiples</h3>
<div class="progress">
<div class="progress-bar bg-info"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100">
</div>
<div class="progress-bar
progress-bar-striped bg-warning"
role="progressbar"
style="width: 20%"
aria-valuenow="20"
aria-valuemin="0"
aria-valuemax="100">
</div>
<div class="progress-bar
progress-bar-striped
progress-bar-animated bg-danger"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
</div>