Ce qui s'affiche pendant une attente. Jamais un texte « Chargement… » seul : toujours un indicateur visuel, et un squelette aux dimensions finales quand c'est du contenu qui arrive.
Quel loader pour quelle attente
- Moins de 300 ms : rien (un loader qui clignote est pire que rien).
- Action d'un bouton : le bouton garde son libellé au participe présent (« Redéploiement ») avec un indicateur de 18 px devant,
aria-busy="true". - Contenu qui arrive (liste, carte, page) : squelette à la taille finale, jamais un spinner au centre d'un écran vide.
- Attente indéterminée isolée : indicateur M3E qui change de forme (48 px,
primary, ou sur conteneurpc). - Tâche longue mesurable (déploiement, upload) : barre ondulée déterminée avec pourcentage ; au-delà de 3 s, une ligne de texte dit ce qui se passe (« Construction de l'image Docker »), en plus du loader, jamais à sa place.
Par style
- Expressive : indicateur qui enchaîne
cookie9,pentagon,pill,sunny,cookie4,ovalen tournant (ressort--ease-spring) ; barre ondulée M3E (vagueprimary, espace, pistesecc, point d'arrêt) en indéterminé ou avec pourcentage ; anneau ; squelette à reflet doux. - Plaza : anneau de 8 points qui s'allument tour à tour (façon Wii U), barre rayée qui défile, squelette en bulle.
- Chrome : arc de gel sur un anneau de métal, jauge segmentée qui balaie (scanner), squelette traversé d'une ligne lumineuse.
Accessibilité
role="progressbar" et aria-label sur l'indicateur, aria-busy="true" sur la zone qui charge, aria-valuenow quand la progression est connue. Sous prefers-reduced-motion, les loaders s'arrêtent sur une forme fixe.