Barres de progression Bootstrap 5

Barre de progression de base

La barre de progression peut être utilisée pour afficher le progrès de l'utilisateur dans un processus.

Pour créer une barre de progression par défaut, ajoutez .progress Ajoutez la classe à l'élément conteneur et définissez .progress-bar Ajoutez la classe à ses éléments enfants. Utilisez l'attribut CSS width pour définir la largeur de la barre de progression :

Exemple

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

Essayer vous-même

Hauteur de la barre de progression

La hauteur par défaut de la barre de progression est 1remgénéralement de 16px) Utilisez CSS height attributs pour le changer.

Astuce :Veuillez noter 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>

Essayer vous-même

Étiquette de barre de progression

Ajoutez du texte à l'intérieur de la barre de progression pour afficher le pourcentage visible :

Exemple

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

Essayer vous-même

Barre de progression colorée

Par défaut, la barre de progression est bleue (principale). Utilisez n'importe quelle classe de fond de contexte 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>
<!-- Gris -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<!-- Gris clair -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>
<!-- Gris foncé -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

Essayer vous-même

la barre de progression à rayures

Utilisez .progress-bar-striped Ajoutez la classe pour ajouter des rayures à la barre de progression :

Exemple

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

Essayer vous-même

l'animation de la barre de progression

Ajoutez .progress-bar-animated Les classes pour créer l'animation de la barre de progression :

Exemple

<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>

Essayer vous-même

Plusieurs barres de progression

Les barres de progression peuvent être empilées :

Exemple

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    Espace libre
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    AVERTISSEMENT
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    DANGER
  </div>
</div>

Essayer vous-même