Composants

Barre de progression

La barre de progression montre l’avancement d’une opération : dossier de prêt, téléversement, étapes d’une souscription. Elle se compose d’un conteneur .progress et d’une ou plusieurs barres .progress-bar.

Exemple de base#

La largeur de la barre est fixée par width ; la valeur courante est aussi décrite par aria-valuenow pour les technologies d’assistance.

<div class="progress mb-3" role="progressbar" aria-label="Dossier complété à 0 %" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress mb-3" role="progressbar" aria-label="Dossier complété à 25 %" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Dossier complété à 100 %" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 100%"></div>
</div>

Libellé dans la barre#

Écrivez le texte directement dans .progress-bar. Il reste centré et lisible tant que la barre est assez large.

40 % remboursé

<div class="progress" role="progressbar" aria-label="Remboursement du prêt" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 40%">40 % remboursé</div>
</div>

Hauteur#

La hauteur se règle sur le conteneur .progress ; la barre s’adapte. La hauteur par défaut est de 1 rem.

60 %

<div class="progress mb-3" role="progressbar" aria-label="Fine" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
  <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Épaisse" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 24px">
  <div class="progress-bar" style="width: 60%">60 %</div>
</div>

Couleurs#

Colorez la barre avec les classes de fond. Rappel : dans Cauri, bg-secondary et bg-success donnent le même vert. Préférez text-bg-* quand la barre contient du texte, pour garantir le contraste.

75 %

100 %

<div class="progress mb-3" role="progressbar" aria-label="Épargne objectif" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success" style="width: 25%"></div>
</div>
<div class="progress mb-3" role="progressbar" aria-label="Crédit utilisé" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-info" style="width: 50%"></div>
</div>
<div class="progress mb-3" role="progressbar" aria-label="Plafond de carte atteint" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-warning" style="width: 75%">75 %</div>
</div>
<div class="progress" role="progressbar" aria-label="Découvert autorisé" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-danger" style="width: 100%">100 %</div>
</div>

Plusieurs barres#

Placez plusieurs .progress-bar dans un même .progress pour comparer des parts d’un total, par exemple la répartition d’un portefeuille. La somme des largeurs ne doit pas dépasser 100 %.

<div class="progress" role="progressbar" aria-label="Répartition de l'épargne : 15 % livret, 30 % dépôt à terme, 20 % assurance">
  <div class="progress-bar" style="width: 15%"></div>
  <div class="progress-bar bg-success" style="width: 30%"></div>
  <div class="progress-bar bg-info" style="width: 20%"></div>
</div>

Barres empilées avec légende#

Avec .progress-stacked, chaque barre est son propre .progress : elle porte alors son role="progressbar", sa valeur et sa largeur. Cela permet de décrire chaque part séparément.

Livret

Dépôt

Assurance

<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Livret" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar">Livret</div>
  </div>
  <div class="progress" role="progressbar" aria-label="Dépôt à terme" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    <div class="progress-bar bg-success">Dépôt</div>
  </div>
  <div class="progress" role="progressbar" aria-label="Assurance" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar bg-info">Assurance</div>
  </div>
</div>

Rayures et animation#

.progress-bar-striped ajoute des rayures ; .progress-bar-animated les anime. L’animation est réservée aux opérations en cours dont la durée est inconnue, et elle est désactivée quand l’utilisateur demande moins de mouvement.

Téléversement…

<div class="progress mb-3" role="progressbar" aria-label="Rayée" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped" style="width: 50%"></div>
</div>
<div class="progress mb-3" role="progressbar" aria-label="Rayée verte" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped bg-success" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Téléversement du justificatif en cours" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 70%">Téléversement…</div>
</div>

Mettre à jour la progression en JavaScript#

La barre n’a pas de script propre : modifiez la largeur et l’attribut aria-valuenow ensemble pour que la valeur annoncée reste exacte.

function mettreAJour(id, pourcentage) {
  const progression = document.getElementById(id);
  const barre = progression.querySelector('.progress-bar');
  barre.style.width = pourcentage + '%';
  progression.setAttribute('aria-valuenow', pourcentage);
  barre.textContent = pourcentage + ' %';
}

mettreAJour('progression-pret', 65);

Classes et attributs

Classes et attributs
Élément	Rôle
`.progress`	Conteneur : fixe la hauteur, le fond gris et les coins arrondis.
`.progress-bar`	Barre de progression ; sa largeur est définie par `style="width: …%"`.
`.progress-stacked`	Conteneur de plusieurs `.progress` côte à côte, chacun avec sa propre largeur.
`.progress-bar-striped`	Rayures diagonales.
`.progress-bar-animated`	Animation des rayures (à combiner avec `.progress-bar-striped`).
`role="progressbar"`	Rôle ARIA, à mettre sur `.progress`.
`aria-valuenow`, `aria-valuemin`, `aria-valuemax`	Valeur courante, minimum et maximum.
`aria-label`	Nom accessible de la barre (obligatoire si aucun texte ne la décrit).

Variables Sass

Variables Sass
Variable	Valeur par défaut
`$progress-height`	`1rem`
`$progress-font-size`	`$font-size-base * .75`
`$progress-bg`	`var(--bs-secondary-bg)`
`$progress-border-radius`	`var(--bs-border-radius)`
`$progress-box-shadow`	`var(--bs-box-shadow-inset)`
`$progress-bar-color`	`$white`
`$progress-bar-bg`	`$primary` (bleu BDU)
`$progress-bar-animation-timing`	`1s linear infinite`
`$progress-bar-transition`	`width .6s ease`

Personnalisation#

Les variables CSS du conteneur permettent d’ajuster une seule barre sans toucher aux autres.

// Sass : barre plus épaisse, verte par défaut
$progress-height: 1.25rem;
$progress-bar-bg: $success;

// CSS : une barre précise
.progression-pret {
  --bs-progress-height: 0.5rem;
  --bs-progress-bar-bg: #0856A1;
  --bs-progress-bar-transition: width 1s ease;
}

Bonnes pratiques

À faire

Donnez toujours un nom à la barre avec aria-label ou aria-labelledby (« Dossier de prêt complété »).
Affichez la valeur en texte quand elle compte (« 3 étapes sur 5 ») : tout le monde ne distingue pas une largeur.
Mettez à jour aria-valuenow en même temps que la largeur.
Utilisez des couleurs cohérentes : vert pour l’avancement normal, jaune ou rouge seulement pour une alerte réelle.

À éviter

N’employez pas la barre pour un état sans durée mesurable : un spinner convient mieux.
Ne comptez pas sur la couleur seule pour transmettre un état (limite atteinte, découvert) : ajoutez un texte.
Ne laissez pas une barre animée à l’écran quand l’opération est terminée.

Accessibilité

role="progressbar" va sur .progress (ou sur chaque .progress d’une barre empilée), avec aria-valuenow, aria-valuemin et aria-valuemax.
Pour une barre sans valeur connue, retirez aria-valuenow : le lecteur d’écran annonce une progression indéterminée.
Le texte clair sur la couleur d’avertissement manque de contraste : utilisez text-bg-warning, qui choisit une couleur de texte lisible.
L’animation et la transition de largeur sont coupées avec prefers-reduced-motion: reduce.