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
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 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.Animations similaires
ABCD
Blur In
Aussi appelée Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
L’élément part très flou et devient net, souvent en glissant ou en apparaissant en fondu.
Usages
Apparition de titres et de textes hero
Ajoute une animation d’entrée « Blur In » (aussi appelée text focus in, focus in ou blur text reveal) sur [où].
Le contenu doit partir très flou et transparent, puis devenir net sur place : doux et plutôt lent, sans déplacement.
Joue-la une seule fois et affiche le texte net tout de suite si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).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
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).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).ABCDEFGHIJKL
Faites défiler à l’intérieur
Progressive Blur
Aussi appelée Gradient blur edge
L’intensité du flou augmente progressivement vers un bord pour que le contenu s’estompe en douceur.
Usages
Bords de conteneurs défilants, en-têtes
Ajoute un bord « Progressive Blur » (aussi appelé gradient blur edge) sur [où].
Le contenu qui défile vers le bord doit devenir progressivement plus flou et plus doux, en montant en douceur au lieu d’être coupé net par une ligne.
N’affiche le flou que sur un bord au-delà duquel il reste du contenu, et empêche la zone floue de bloquer les clics ou le défilement.Autres animations : Loading & Progress
Bouncing Dots
Aussi appelée Dots loader, Ellipsis loader, Three-dot loader
Une rangée de points rebondit, s’estompe ou change d’échelle à tour de rôle.
Usages
Chargement en ligne, attente dans un chat
Ajoute des « Bouncing Dots » (aussi appelés dots loader ou three-dot loader) sur [où].
Les points doivent sauter et retomber l’un après l’autre sur un rythme léger et élastique, avec une courte pause avant que la séquence recommence.
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).Button Loading State
Aussi appelée Spinner button, Loading button, Button spinner, Submit loading state
Un bouton remplace son libellé par un petit spinner, ou en ajoute un, pendant qu’une action s’exécute.
Usages
Envoi de formulaires, actions asynchrones
Ajoute un « Button Loading State » (aussi appelé spinner button ou loading button) sur [où].
À l’appui, le bouton doit s’enfoncer légèrement, faire disparaître son libellé en fondu et afficher un petit spinner à sa place pendant l’action, puis ramener le libellé une fois terminé.
Garde la largeur du bouton fixe pendant le chargement, bloque les clics répétés et annonce l’état occupé aux lecteurs d’écran.Circular Spinner
Aussi appelée Spinner, Throbber, Circular indeterminate
Un anneau ou un arc tourne en continu pour indiquer qu’un chargement est en cours.
Usages
Boutons, chargements de page
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).