Button Loading State

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

L’icône de copie se transforme en coche et le libellé affiche Copié un instant.

Ajoute une animation « Copy-to-Clipboard Feedback » (aussi appelée copied state ou copy icon to checkmark) sur [où].
Quand on appuie sur le bouton de copie, l’icône de copie doit rétrécir rapidement pendant qu’une coche se dessine et que le libellé devient « Copié », puis tout revient en douceur après un court instant.
Garde le bouton à la même taille pendant l’échange pour que rien ne bouge, et annonce l’état copié aux lecteurs d’écran.

Un cercle et une coche se dessinent d’eux-mêmes pour confirmer qu’une action a réussi.

Ajoute une animation « Success Checkmark » (aussi appelée animated success tick) sur [où].
Un cercle doit se dessiner d’un seul trait fluide, puis la coche se trace à l’intérieur et tout le symbole fait un petit rebond doux : calme et assuré.
Joue-la une fois quand l’action réussit, accompagne-la d’un message texte que les lecteurs d’écran peuvent annoncer, et affiche directement le symbole terminé si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Maintenir un élément enfoncé un instant déclenche des actions supplémentaires ou un remplissage de progression.

Ajoute une interaction d’appui long (Long Press) (aussi appelée press and hold ou touch and hold) sur [où].
Pendant l’appui, l’élément doit s’enfoncer légèrement tandis qu’un remplissage de progression le parcourt à rythme régulier ; une fois plein, il revient avec un petit ressort et ouvre son menu, et relâcher trop tôt annule et réinitialise le remplissage.
Donne aux utilisateurs du clavier et des lecteurs d’écran un autre moyen d’accéder aux mêmes actions, et empêche l’appui de sélectionner du texte ou d’ouvrir le menu contextuel du navigateur.

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.