Bootstrap 4 barres de progression
Barre de progression de base
Une barre de progression peut être utilisée pour montrer à un utilisateur où il en est dans un processus.
Pour créer une barre de progression par défaut, ajoutez une .progressclasse à un élément conteneur et ajoutez la .progress-barclasse à son élément enfant. Utilisez la propriété CSS widthpour définir la largeur de la barre de progression :
Exemple
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
Hauteur de la barre de progression
La hauteur de la barre de progression est de 16 pixels par défaut. Utilisez la propriété CSS heightpour le modifier. Notez que vous devez définir la même hauteur pour le conteneur de progression et la barre de progression :
Exemple
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
Étiquettes de la barre de progression
Ajoutez du texte dans la barre de progression pour afficher le pourcentage visible :
Exemple
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
Barres de progression colorées
Par défaut, la barre de progression est bleue (principale). Utilisez l'une des classes d'arrière-plan contextuelles Bootstrap 4 pour changer sa couleur :
Exemple
<!-- Blue -->
<div class="progress">
<div class="progress-bar"
style="width:10%"></div>
</div>
<!-- Green -->
<div
class="progress">
<div
class="progress-bar bg-success" style="width:20%"></div>
</div>
<!--
Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning"
style="width:40%"></div>
</div>
<!-- Red -->
<div
class="progress">
<div class="progress-bar bg-danger"
style="width:50%"></div>
</div>
<!-- White -->
<div
class="progress border">
<div
class="progress-bar bg-white" style="width:60%"></div>
</div>
<!--
Grey -->
<div class="progress">
<div class="progress-bar bg-secondary"
style="width:70%"></div>
</div>
<!-- Light Grey -->
<div
class="progress border">
<div class="progress-bar bg-light"
style="width:80%"></div>
</div>
<!--
Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
Barres de progression rayées
Utilisez la .progress-bar-stripedclasse pour ajouter des bandes aux barres de progression :
Exemple
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>
Barre de progression animée
Ajoutez la .progress-bar-animatedclasse pour animer la barre de progression :
Exemple
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
Barres de progression multiples
Les barres de progression peuvent également être empilées :
Exemple
<div class="progress">
<div class="progress-bar bg-success"
style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger"
style="width:20%">
Danger
</div>
</div>