Reference specimen. Example copy comes from the Pelote specs and is in French.
LiveAnimations en direct dans l'aperçu
ExpressiveRéférence
62 %
Indicateur qui change de forme, anneau, barre ondulée, bouton occupé, squelette.
PlazaWii U / 3DS
Anneau de points façon Wii U, barre rayée, squelette en bulle.
ChromeY2K
Arc de gel, jauge scanner, squelette à ligne lumineuse.
UX / UIRègles illustrées
check_circleÀ faire
Un squelette aux dimensions finales : la page ne saute pas quand le contenu arrive.
cancelÀ éviter
Chargement…
Un texte « Chargement… » seul : rien ne bouge, on ne sait pas si l'app est figée.
check_circleÀ faire
Le bouton garde un libellé et montre l'indicateur : on sait ce qui est en cours.
cancelÀ éviter
Un bouton grisé avec un texte d'attente, sans indicateur.
infoReference specimen. Example copy comes from the Pelote specs and is in French.
What shows during a wait. Never a "Loading…" text alone: always a visual indicator, and a skeleton at final dimensions when content is arriving.
Rules
Under 300 ms: nothing. Button action: keep the label, add an 18px indicator and aria-busy. Arriving content: a skeleton, never a spinner in an empty screen.
Indeterminate wait: an M3E indicator that morphs. Long measurable task: a determinate wavy bar with a percentage; past 3 s, text may say what is happening, never replace the loader.
role="progressbar" and aria-label on the indicator, aria-busy on the loading area, aria-valuenow when known. prefers-reduced-motion freezes it on a fixed shape.