Skeleton Shimmer
Aussi appelée Skeleton wave, Shimmer effect, placeholder-wave
Un reflet lumineux balaie des formes grises de remplacement.
Usages
Espaces réservés pendant le chargement du contenu
Variantes
- wave / shimmer
- text lines
- avatar + card
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 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).Animations similaires
Pulse Placeholder
Aussi appelée Skeleton pulse, placeholder-glow
Des blocs gris de remplacement s’estompent et réapparaissent doucement pour signaler un chargement.
Usages
Écrans squelettes
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).A
Survolez la démo
Shine Sweep
Aussi appelée Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
Au survol, une bande de lumière diagonale balaie l’élément d’un côté à l’autre.
Usages
Boutons, cartes, badges
Ajoute un effet au survol « Shine Sweep » (aussi appelé sheen, shiny button, shine on hover, glint, shimmer ou shimmer button) sur [où].
Une douce bande de lumière diagonale doit balayer l’élément de gauche à droite, puis recommencer après une courte pause tant que le pointeur reste dessus.
Garde la bande rognée à l’intérieur de l’élément, arrête-la quand le pointeur sort et ne la joue pas si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).ABC DEFGH
Shimmer Text
Aussi appelée Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
Un reflet lumineux balaie les lettres à plusieurs reprises.
Usages
Badges et pastilles d’annonce
Ajoute un effet « Shimmer Text » (aussi appelé animated shiny text ou metallic shimmer text) sur [où].
Une bande de lumière doit balayer les lettres en douceur de gauche à droite, puis recommencer après une courte pause.
Garde le texte lisible sous le reflet et laisse-le immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).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
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
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.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).