4.5 — Groupes de boutons, spinners, progress, placeholders

⏱️ TL;DR — Quatre petits essentiels : button group (.btn-group pour coller des boutons), spinner (.spinner-border, .spinner-grow pour un chargement), progress (.progress + .progress-bar pour une barre), placeholder (.placeholder pour un squelette de chargement).

🎯 Objectifs

Grouper des boutons (barre d’outils, toggles).
Afficher spinners et barres de progression.
Créer des placeholders de chargement.

Button group


<div class="btn-group" role="group" aria-label="Actions">
  <button class="btn btn-outline-primary">Gauche</button>
  <button class="btn btn-outline-primary active">Milieu</button>
  <button class="btn btn-outline-primary">Droite</button>
</div>
 
<!-- vertical -->
<div class="btn-group-vertical">…</div>
 
<!-- tailles -->
<div class="btn-group btn-group-sm">…</div>

Toolbar (plusieurs groupes) :


<div class="btn-toolbar" role="toolbar">
  <div class="btn-group me-2">…</div>
  <div class="btn-group">…</div>
</div>

Spinners


<div class="spinner-border" role="status">
  <span class="visually-hidden">Chargement…</span>
</div>
<div class="spinner-grow text-primary" role="status"></div>
<div class="spinner-border spinner-border-sm"></div>

spinner-border (rotation) ou spinner-grow (pulsation).
Colorables via text-*, taille -sm.
visually-hidden fournit un texte pour lecteurs d’écran.

Progress


<div class="progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 60%">60 %</div>
</div>
 
<!-- rayée et animée -->
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width:45%"></div>
</div>
 
<!-- empilées (5.3 : progress-stacked) -->
<div class="progress-stacked">
  <div class="progress" role="progressbar" style="width:30%"><div class="progress-bar">30</div></div>
  <div class="progress" role="progressbar" style="width:20%"><div class="progress-bar bg-warning">20</div></div>
</div>

Placeholders (squelette)


<p class="placeholder-glow">
  <span class="placeholder col-6"></span>
  <span class="placeholder col-8"></span>
</p>
 
<a href="#" class="btn btn-primary disabled placeholder col-4"></a>

placeholder grise un bloc ; placeholder-glow/placeholder-wave l’anime. Idéal pendant un chargement de données.

⚠️ Piège — Un spinner sans role="status" ni texte caché n’est pas annoncé aux lecteurs d’écran : l’utilisateur non-voyant ne sait pas que « ça charge ». Ajoutez toujours un visually-hidden.

💡 Pour un dev React — Les placeholders remplacent avantageusement un « Loading… » brut pendant un useState/Suspense : affichez le squelette tant que isLoading, puis le contenu. Le rendu perçu est bien meilleur.

✏️ Exercices

Une barre de progression verte à 75 %, rayée et animée.

✅ Solution


<div class="progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width:75%">75 %</div>
</div>

Un bouton en état de chargement avec un petit spinner.

✅ Solution


<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span> Chargement…
</button>

🧠 Quiz de révision

1. Quelle classe colle des boutons ensemble ?

btn-group.

2. Deux styles de spinner ?

spinner-border et spinner-grow.

3. Où se règle le pourcentage d’une barre de progression ?

Sur .progress-bar via style="width:…" (et les attributs aria-valuenow).

4. Quelle classe pour un squelette de chargement ?

placeholder (+ placeholder-glow ou -wave).

5. Comment rendre un spinner accessible ?

role="status" + un texte en visually-hidden.

🎉 Fin de la Partie 4 ! Partie suivante : Partie 5 — Navigation & overlays