Top Loading Bar
Aussi appelée Page progress bar, NProgress
Une fine barre en haut de la page avance lentement pendant la navigation et se termine au chargement.
Usages
Chargement des routes d’une SPA
Prompt
Remplacez [où] par la partie de votre page, puis collez le prompt dans votre agent IA. Chaque prompt contient le nom de l’animation : la prochaine fois, il vous suffira de la demander par son nom.
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.Animations similaires
Determinate Progress Bar (barre de progression)
Aussi appelée Progress bar fill, Progress Indicator, Progress bar, Circular progress
Une barre se remplit de gauche à droite en proportion de l’avancement de la tâche.
Usages
Téléversements, formulaires en plusieurs étapes
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.Faites défiler à l’intérieur
Scroll Progress Indicator (barre de progression de lecture)
Aussi appelée Reading Progress Bar, Progress Bar
Une barre ou un anneau se remplit à mesure que l’utilisateur fait défiler la page ou l’article.
Usages
Articles et pages longues
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.Indeterminate Linear Progress (barre de progression indéterminée)
Aussi appelée Indeterminate progress bar, Buffer bar
Un segment de barre parcourt la piste en boucle lorsque la durée est inconnue.
Usages
Chargement en haut de page ou dans une carte
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.Autres animations : Loading & Progress
Typing Indicator
Aussi appelée Typing dots, Chat is typing
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.
Usages
Chats, assistants IA
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.Bar Loader (Equalizer)
Aussi appelée Bars loader, Audio bars
Des barres verticales grandissent et rétrécissent en décalé, comme un égaliseur audio.
Usages
Indicateurs de chargement ou de lecture en cours
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).Blur-Up Placeholder
Aussi appelée LQIP, Blur placeholder, Progressive image load
Une minuscule version floue de l’image occupe sa place et devient nette quand l’image complète se charge.
Usages
Images hero, galeries
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.