Hypno Cascade
Indicateur d'attente en CSS pur : 24 pétales arc-en-ciel respirent en vague autour d'un libellé lu par les lecteurs d'écran, à la taille voulue.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La couronne compte 24 pétales .hcx-petal. Chacun est tourné, teinté et décalé dans le temps selon sa place : sibling-index() quand le navigateur le connaît (Chrome 138, Safari 26.2), sinon la variable --i écrite dans le HTML. La teinte suit le cercle chromatique en oklch ; chaque pétale s'allonge puis se rétracte en 2,4 s (hcx-breathe), avec 0,1 s d'écart avec son voisin, ce qui fait tourner une vague de lumière.
Les teintes passent par deux couleurs déclarées avec @property (--hcx-tint, --hcx-glow) : chaque pétale calcule ainsi la sienne. C'est ce qui corrige Safari 26, qui peignait sinon toute la couronne de la même couleur rose.
La taille se règle par --hcx-size sur la racine (300 px par défaut). Toutes les mesures des pétales sont en unités de conteneur (cqi) : la couronne reste proportionnée à 64 px comme à 300 px, et rétrécit d'elle-même dans un conteneur plus étroit que --hcx-size. Aucun JavaScript : c'est à vous d'afficher l'indicateur au début de l'attente et de le retirer à la fin.
Accessibilité
- Attente annoncée : le libellé porte
role="status". Pour qu'il soit lu, insérez l'indicateur dans la page au moment où l'attente commence, ou changez le texte du libellé à ce moment-là : une zone de statut annonce ses changements, pas son contenu de départ. - Couronne décorative : les pétales sont dans un conteneur
aria-hidden="true", les points de suspension animés aussi ; seul le mot est lu. - Mouvement réduit : sous
prefers-reduced-motion: reduce, les pétales s'arrêtent à mi-longueur, bien visibles (opacité 0,8), et les points cessent de clignoter. L'indicateur reste là, figé. - Petites tailles : sous 120 px environ, le libellé déborde sur les pétales ; masquez-le visuellement (en gardant
role="status") et écrivez l'attente à côté, comme dans l'exemple de la ligne de compte.
Compatibilité navigateur
100 % CSS. Couleurs oklch : Chrome 111, Firefox 113, Safari 15.4. Unités de conteneur : Chrome 105, Firefox 110, Safari 16. @property : Chrome 85, Firefox 128, Safari 16.4. sibling-index() : Chrome 138, Safari 26.2, Firefox 154 (non disponible dans Firefox 153 : la variable --i prend le relais). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : teinte propre à chaque pétale dans les trois, tailles 300, 160 et 120 px, deux copies, mouvement réduit, 0 erreur.
Sans oklch (navigateurs anciens), la couronne perd son arc-en-ciel : pétales d'un rose uni, ou sans couleur selon le navigateur ; le libellé reste. Sans unités de conteneur, les pétales perdent leurs dimensions : prévoyez un message d'attente simple pour ces navigateurs si vous les visez.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0818-root">
<div class="hcx-stage">
<div class="hcx-ring" aria-hidden="true">
<span class="hcx-petal" style="--i: 0"></span>
<!-- … 24 pétales, --i de 0 à 23 -->
</div>
<p class="hcx-label" role="status">Génération<span class="hcx-dots" aria-hidden="true">…</span></p>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Taille (CSS — --hcx-size sur .fx-0818-root) |
300px |
De 64 px (dans un bouton, une bulle) à 400 px (écran d'attente). Pétales, rayon et halo suivent. |
Vitesse (CSS — durée de hcx-breathe dans .hcx-petal) |
2.4s |
1,6 s pour une attente nerveuse, 4 s pour un écran calme ; changez aussi le -.1s du décalage pour garder une seule vague. |
Couleurs (CSS — --hcx-tint dans .hcx-petal) |
oklch(78% .29 teinte) sur tout le cercle |
Fixez la luminosité et la saturation de votre charte, ou remplacez 360 par 120 dans le calcul de teinte pour un dégradé sur un tiers du cercle. |
Libellé (HTML — texte de .hcx-label) |
« Génération » | Le mot qui décrit l'attente : « Recherche », « Calcul », « Envoi ». Gardez-le court, il doit tenir dans le cercle. |
Fond (CSS — background de .fx-0818-root) |
#0a0a0f, hauteur mini 300 px |
Les pétales lumineux ressortent sur un fond sombre ; mettez min-height: 0 pour l'insérer dans un composant. |
FAQ
sibling-index() (prévu dans Firefox 154) : sans --i, tous les pétales s'y superposeraient. Le CSS utilise sibling-index() quand il est là et retombe sur --i sinon.hidden d'un bloc qui l'entoure (posé sur la racine elle-même, il ne la cache pas : son display: flex l'emporte), juste avant d'appeler votre serveur, puis retirez-la dans le finally de la promesse. L'indicateur n'a aucun JavaScript : il tourne tant qu'il est dans la page.<span class="hcx-petal"> et la valeur --n (24) dans .hcx-petal. Avec 12 pétales, élargissez-les un peu (width) pour garder une couronne dense.
