Progress Ring

Un anneau ou un camembert se remplit dans le sens horaire jusqu’à son pourcentage.

Ajoute une animation « Donut Chart Fill » (aussi appelée pie chart sweep ou animated donut chart) sur [où].
En partant du haut, chaque segment doit se déployer à tour de rôle dans le sens horaire jusqu’à ce que l’anneau affiche sa part, en ralentissant en douceur à la fin.
Joue-la une seule fois quand le graphique entre à l’écran, et garde les vraies valeurs disponibles en texte pour les 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.

Une barre ou un anneau se remplit à mesure que l’utilisateur fait défiler la page ou l’article.

Ajoute une barre de progression de lecture (Scroll Progress Indicator, aussi appelée reading progress bar) sur [où].
Une fine barre en haut doit se remplir de gauche à droite au fil du défilement, jusqu’à occuper toute la largeur à la fin.
Lie-la directement à la position de défilement, sans retard de lissage, et fais en sorte qu’elle ne masque pas le contenu.

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.