Indeterminate Linear Progress (barre de progression indéterminée)

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.

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.

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 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).