Sommaire

Les barres de progression

1. Les objectifs

Les barres de progression sont très couramment utilisées dans les interfaces web pour indiquer la progression d’un téléchargement, pour informer les visiteurs de l’avancée d’un projet...

2. Les barres de progression simples

Pour insérer une barre de progression, nous utilisons une boîte <div> avec :

  • la classe .progress,

  • l’attribut role=progressbar,

  • l’attribut tabindex="0",

  • et les paramètres d’accessibilité ARIA :

  • aria-valuenow ="50" pour indiquer la valeur actuelle,

  • aria-valuetext="50 percent" pour indiquer la valeur actuelle en texte,

  • aria-valuemin="0" pour indiquer la valeur minimale,

  • aria-valuemax ="100" pour indiquer la valeur maximale.

<div class="progress" role="progressbar" tabindex="0"  
aria-valuenow="50" aria-valuemin="0" aria-valuetext="50 percent"  
aria-valuemax="100"> 
  <div class="progress-meter" style="width: 50%"></div> 
</div>

Le fichier de cet exemple à télécharger est Chapitre 11 / 11-medias-d2.html.

Voilà son affichage, dont la largeur dépend de celle de son élément parent :

images/C11-005.png

3. Les options des barres de progression

Vous pouvez colorer les barres de progression, avec les classes que nous avons vues maintes fois :

  • .secondary : gris,

  • .success : vert,

  • .alert : rouge,

  • .warning : orange. ...