Typing Indicator

Une rangée de points rebondit, s’estompe ou change d’échelle à tour de rôle.

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

Les caractères apparaissent un par un comme s’ils étaient tapés, généralement suivis d’un curseur clignotant.

Ajoute un effet machine à écrire (Typewriter) sur [où], aussi appelé typing animation ou typing text.
Les caractères doivent apparaître un par un à un rythme de frappe régulier, avec un curseur juste après le dernier caractère tapé qui clignote quelques fois une fois la saisie terminée.
Joue-le une seule fois plutôt qu’en boucle, laisse les lecteurs d’écran lire tout le texte immédiatement et affiche le texte complet si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les lettres montent et descendent en séquence, créant une vague qui parcourt le mot.

Ajoute un effet « Wavy Text » (aussi appelé text wave) sur [où].
Les lettres doivent monter et descendre l’une après l’autre pour qu’une vague douce et fluide parcoure le mot en continu.
Fais une boucle sans coupure, fais-le lire comme un seul mot par les lecteurs d’écran et arrête la vague si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Des barres verticales grandissent et rétrécissent en décalé, comme un égaliseur audio.

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

Une minuscule version floue de l’image occupe sa place et devient nette quand l’image complète se charge.

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.