Loading & Progress

Des barres verticales grandissent et rétrécissent en décalé, comme un égaliseur audio.

Ajoute une animation de chargement « Bar Loader (Equalizer) » (aussi appelée bars loader ou audio bars) sur [où].
Quelques barres verticales doivent s’étirer et se contracter en décalé comme un égaliseur audio, à un rythme vif mais régulier.
Garde une boucle sans coupure, donne-lui un libellé d’état pour les lecteurs d’écran et arrête le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une minuscule version floue de l’image occupe sa place et devient nette quand l’image complète se charge.

Ajoute un effet de chargement d’image « Blur-Up Placeholder » (aussi appelé LQIP ou blur placeholder) sur [où].
Une minuscule version très floue de l’image doit occuper son espace immédiatement, puis, une fois l’image complète chargée, devenir nette en douceur et assez rapidement.
Réserve la taille exacte de l’image pour que rien ne bouge à son arrivée, et rogne les bords flous pour qu’ils ne débordent pas du cadre.

Une rangée de points rebondit, s’estompe ou change d’échelle à tour de rôle.

Ajoute des « Bouncing Dots » (aussi appelés dots loader ou three-dot loader) sur [où].
Les points doivent sauter et retomber l’un après l’autre sur un rythme léger et élastique, avec une courte pause avant que la séquence recommence.
Garde une boucle sans coupure, donne-lui un libellé d’état pour les lecteurs d’écran et arrête le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un bouton remplace son libellé par un petit spinner, ou en ajoute un, pendant qu’une action s’exécute.

Ajoute un « Button Loading State » (aussi appelé spinner button ou loading button) sur [où].
À l’appui, le bouton doit s’enfoncer légèrement, faire disparaître son libellé en fondu et afficher un petit spinner à sa place pendant l’action, puis ramener le libellé une fois terminé.
Garde la largeur du bouton fixe pendant le chargement, bloque les clics répétés et annonce l’état occupé aux lecteurs d’écran.

Un anneau ou un arc tourne en continu pour indiquer qu’un chargement est en cours.

Ajoute un « Circular Spinner » (aussi appelé spinner ou throbber) sur [où].
Un arc doit tourner régulièrement autour d’un anneau pâle en s’allongeant et en se raccourcissant, de façon fluide et continue.
Garde une rotation sans coupure, donne-lui un libellé de chargement pour les lecteurs d’écran et ralentis-le ou arrête-le si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une barre se remplit de gauche à droite en proportion de l’avancement de la tâche.

Ajoute une barre de progression (Determinate Progress Bar) sur [où], aussi appelée progress bar fill ou progress indicator.
La barre doit se remplir de gauche à droite au rythme de la progression réelle, avec des transitions douces entre les mises à jour, et afficher le pourcentage à côté.
Utilise la sémantique de barre de progression avec les valeurs actuelle, minimale et maximale pour que les lecteurs d’écran puissent la lire, et ne laisse jamais le remplissage reculer.

Un segment de barre parcourt la piste en boucle lorsque la durée est inconnue.

Ajoute une barre de progression indéterminée (Indeterminate Linear Progress) sur [où], aussi appelée indeterminate progress bar.
Un court segment doit parcourir la piste d’un bout à l’autre encore et encore, rapide et fluide, tant que la durée de la tâche est inconnue.
Fais entrer et sortir entièrement le segment de la piste pour que la boucle n’ait aucune coupure visible, et signale-la comme barre de progression occupée pour les lecteurs d’écran.

Une liste d’étapes se met en évidence ou se coche une à une à mesure qu’une longue tâche avance.

Ajoute un « Multi-Step Loader » (aussi appelé step loader ou checklist loader) sur [où].
Les étapes doivent s’allumer une à une de haut en bas, et chacune doit recevoir une petite coche qui apparaît avec un léger rebond une fois terminée, à un rythme calme et lisible.
Fais avancer les étapes selon la progression réelle de la tâche plutôt qu’avec un minuteur fixe, et annonce chaque étape terminée aux lecteurs d’écran.

Un arc s’étend autour d’un anneau pour indiquer le pourcentage accompli.

Ajoute un « Progress Ring » (aussi appelé circular progress ou radial progress) sur [où].
En partant du haut, un arc doit s’étendre dans le sens des aiguilles d’une montre autour de l’anneau pour montrer le pourcentage accompli, en ralentissant doucement à l’arrivée, pendant que le nombre au centre augmente en même temps.
Garde l’arc et le nombre synchronisés, et expose la valeur avec la sémantique de barre de progression pour les lecteurs d’écran.

Des blocs gris de remplacement s’estompent et réapparaissent doucement pour signaler un chargement.

Ajoute un « Pulse Placeholder » (aussi appelé skeleton pulse) sur [où].
Des blocs gris ayant la forme du contenu à venir doivent s’éclaircir puis revenir lentement, tous ensemble, sur un rythme doux et régulier.
Calque les blocs sur la mise en page réelle pour que rien ne saute à l’arrivée du contenu, et laisse-les immobiles si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un reflet lumineux balaie des formes grises de remplacement.

Ajoute un « Skeleton Shimmer » (aussi appelé skeleton wave ou shimmer effect) sur [où].
Une bande de lumière douce doit balayer les formes grises de gauche à droite et marquer une courte pause avant le passage suivant : fluide et sans hâte.
Calque les formes sur la mise en page réelle pour que rien ne saute au chargement du contenu, et affiche des blocs statiques si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une fine barre en haut de la page avance lentement pendant la navigation et se termine au chargement.

Ajoute une « Top Loading Bar » (aussi appelée page progress bar) sur [où].
Une fine barre le long du bord supérieur doit d’abord filer vers l’avant, puis avancer de plus en plus lentement pendant le chargement de la page ; une fois le chargement fini, elle doit foncer jusqu’au bout et disparaître en fondu.
Ne la laisse jamais atteindre la fin avant que le chargement soit vraiment terminé, et évite qu’elle masque ou décale le contenu de la page.

Trois points dans une bulle pulsent ou s’élèvent tour à tour pour montrer que quelqu’un ou une IA est en train d’écrire.

Ajoute un « Typing Indicator » (aussi appelé typing dots) sur [où].
Les points dans une petite bulle de chat doivent s’élever et s’éclaircir l’un après l’autre sur un rythme doux et léger pendant que l’autre personne écrit.
Garde une boucle sans coupure, retire la bulle dès que le message arrive, et donne aux lecteurs d’écran un court texte d’état à la place des points.