Sommaire

Les barres de progression COMPOSANTS D’INTERFACE D’ADMINISTRATION:Barres de progression

1. L’objectif

Les barres de progression sont très utilisées dans les interfaces d’administration des applications Web. Bootstrap nous propose toute une série de barres de progression mises en forme de manières variées.

Consultez le fichier Bootstrap-07-COMP-Admin/01-interface.html pour visualiser les exemples.

2. La barre de progression simple

Commençons par une barre de progression simple, sur fond bleu.

Voici le code HTML :

<div class="progress"> 
   <div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 
      <span class="sr-only">60% Complete</span> 
   </div> 
</div>

Nous créons une première boîte <div> avec la classe .progress, qui inclut une seconde boîte ayant la classe .progress-bar. Par défaut, la couleur de fond de la barre de progression est bleue.

Notez que les barres de progression ont une largeur de 100 % de leur élément parent.

Voici l’affichage obtenu :

images/C13-009.png

3. Les barres de progression colorées

Vous pouvez ajouter des classes pour avoir une couleur de fond différente :

  • progress-bar-success : fond vert.

  • progress-bar-info : fond cyan.

  • progress-bar-warning : fond orange.

  • progress-bar-danger : fond rouge.

Exemple :

<div ...