Text Loading
Pseudo-élément ::after animé par @keyframes qui défile en quatre états de contenu — vide, un point, deux points, trois points — sur un cycle de 1,5 s ; un seul div, zéro JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Chargement comprend 29 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet tient dans un seul <div class="loader-text"> : le texte statique (ici « Loading ») est écrit directement dans le HTML, et ::after porte l'animation. Le CSS attribue au div font-size: 1.2rem, font-weight: 600 et color: #6366f1 (indigo). Le pseudo-élément démarre avec content: "" et reçoit animation: 1.5s ease 0s infinite normal none running loadingDots — durée 1,5 s, fonction ease, délai nul, boucle infinie, aucun état de remplissage. Rendu mesuré dans Chromium : 74,7 × 22 px pour le texte « Loading » en 19,2 px/600. Aucun JavaScript.
@keyframes loadingDots définit quatre paliers : 0 % → "", 25 % → ".", 50 % → "..", 75 % → "...". La propriété content est discrète : elle ne s'interpole pas, elle bascule. Avec la fonction ease, la bascule se produit au moment où la courbe de Bézier atteint 50 % de progression sur chaque intervalle de 375 ms — ce qui ne coïncide pas exactement avec la mi-intervalle. Il n'y a pas de palier à 100 % : la valeur "..." persiste jusqu'à la moitié implicite de l'intervalle 75 %–100 %, puis le cycle repart à "". Mesuré dans Chromium : séquence conforme, aucune erreur console.
Pour quatre états d'une durée strictement identique (375 ms chacun), remplacez ease par steps(1, end) dans la déclaration animation, ou ajoutez un palier explicite 100 % { content: "" }. L'effet est CSS pur : il s'intègre à l'identique dans un iframe, un composant Shadow DOM ou un bouton, sans position absolue, sans z-index et sans dépendance externe.
Accessibilité
- prefers-reduced-motion absent du code : aucune règle
@media (prefers-reduced-motion: reduce)ne suspend l'animation. Mesuré sous Playwright avec émulationreduce:animationPlayStateresterunning. Correctif :@media (prefers-reduced-motion: reduce) { .loader-text::after { animation: none; content: "…"; } }. - role="status" absent : un indicateur de chargement doit avertir les lecteurs d'écran quand il apparaît ou disparaît. Ajoutez
role="status"(ouaria-live="polite") sur le div pour que VoiceOver et NVDA annoncent l'élément à son entrée dans le DOM. - Les points animés (::after) ne sont pas lus par les lecteurs d'écran : les pseudo-éléments sont absents de l'arbre d'accessibilité. Le texte statique (« Loading ») est bien annoncé — les points sont décoratifs, ce qui est acceptable si le texte décrit l'état. Si le div est laissé vide (points seuls), ajoutez
aria-label="Chargement". - L'effet est CSS pur et indépendant de la souris : il fonctionne à l'identique sur mobile, tablette et dans tout conteneur statique. Aucun
position: fixed, aucunz-index, aucun débordement — le div suit le flux normal du document.
Compatibilité navigateur
CSS pur : requiert animation, @keyframes et content sur les pseudo-éléments. Aucune variable CSS du site, aucune dépendance, aucun JavaScript.
Sans prise en charge des animations CSS (IE 9 et antérieurs), le div affiche le texte statique sans points — contenu lisible, état de chargement communiqué par le texte seul. Sans pseudo-éléments, même résultat.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="loader-text">Loading</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| Texte statique (HTML — contenu du div) | "Loading" | N'importe quelle chaîne, y compris vide pour n'afficher que les points. Le CSS ne change pas. |
Couleur (CSS — color: #6366f1) |
#6366f1 (indigo) | Couleur du texte et des points. Le pseudo-élément hérite de color. |
Taille (CSS — font-size: 1.2rem) |
1.2rem (19,2 px sur une base 16 px) | Taille du bloc entier — texte et points. Rendu mesuré : 74,7 × 22 px pour « Loading » en 19,2 px. |
Graisse (CSS — font-weight: 600) |
600 | 400 pour un loader discret en corps de page ; 700 pour un titrage en chargement. |
Durée du cycle (CSS — animation: 1.5s …) |
1.5s | 1s = points vifs (~250 ms par état) ; 2.4s = rythme lent (~600 ms par état). |
Uniformité du timing (CSS — ease dans animation) |
ease | Avec ease, les bascules de contenu discret ne sont pas strictement à 375 ms chacune. Remplacez par steps(1, end) pour un rythme rigoureusement uniforme. |
États de points (CSS — valeurs content dans @keyframes) |
"" / "." / ".." / "..." | Remplacez par "•" / "••" / "•••" pour des points médians, ou réduisez à deux états ("" et "...") pour une alternance franche. |
FAQ
animation utilise ease, une courbe cubique de Bézier. Pour content (propriété discrète), la bascule se produit quand la courbe atteint 50 % de progression sur chaque intervalle de 375 ms, ce qui ne coïncide pas avec la mi-durée. Les quatre états restent tous visibles, mais leurs durées effectives diffèrent légèrement. Pour un rythme strictement uniforme, remplacez ease par steps(1, end).clip-path sur ::before/::after, il communique une distorsion ou une esthétique rétro, pas une attente. Text Loading anime content sur ::after pour signaler une progression : le rythme des points est un code visuel universel. Les deux effets partagent un div de texte comme cible, mais n'ont ni le même rendu, ni le même usage, ni la même technique.<div class="loader-text"></div>). L'animation affichera "", ".", "..", "..." — trois points purs en indigo, visuellement proches de l'indicateur de frappe d'un chat. Dans ce cas, ajoutez aria-label="Chargement" sur le div : le texte statique étant absent, les lecteurs d'écran n'ont rien à lire sans cet attribut.
