Wave Bars
Cinq barres de 6 × 50 px en indigo (#6366f1), scaleY oscillant entre .4 et 1 sur un cycle de 1,2 s, staggerées de 0,1 s de gauche à droite : l'onde parcourt les cinq barres en 0,4 s. Pur CSS, 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
Le .loader-wave est une rangée flex (gap : 4 px, align-items : center, height : 50px) de cinq span vides, chacun mesurant 6 × 50 px et coloré #6366f1. Aucun élément n'est créé à l'exécution : les cinq barres sont déclarées dans le HTML vendu. Mesurés en Chromium, l'ensemble occupe 46 × 50 px (5 × 6 px de barre + 4 × 4 px de gouttière). Il n'y a aucun JavaScript.
L'animation @keyframes wave pilote un scaleY sur l'origine verticale : 0 % → scaleY(.4) (hauteur visuelle 20 px), 20 % → scaleY(1) (hauteur pleine 50 px), retour à scaleY(.4) dès 40 % et maintien jusqu'à 100 %. La montée et la descente prennent chacune 240 ms ; la barre reste au minimum pendant 720 ms, soit 60 % du cycle de 1,2 s. Chaque span reçoit un délai négatif décroissant par pas de 0,1 s : −1,2 s / −1,1 s / −1,0 s / −0,9 s / −0,8 s. Le pic de hauteur se déplace ainsi barre par barre de gauche à droite, produisant une onde qui traverse les cinq barres en 0,4 s, puis recommence.
Mesuré en Chromium : à t ≈ 0 la barre 1 atteint scaleY(0,986) (quasi hauteur pleine) tandis que les barres 4 et 5 sont à scaleY(0,4) ; à t ≈ 600 ms, les barres 4 et 5 atteignent leur maximum et les barres 1 et 2 sont au repos. Aucune erreur console. L'animation tourne en continu (animation-iteration-count : infinite) sans condition d'arrêt : le loader reste actif tant qu'il est dans le DOM, que la page soit au repos ou non.
Accessibilité
- prefers-reduced-motion absent du code — mesuré : sous émulation
prefers-reduced-motion : reduceen Chromium, les cinq barres continuent de s'animer (animationPlayState : running) sans aucun changement. Ajoutez@media (prefers-reduced-motion : reduce) { .loader-wave span { animation : none; transform : scaleY(.4); } }— les barres restent visibles à leur hauteur minimale (20 px). - Aucun attribut ARIA : le
.loader-wavene porte nirole="status", niaria-label, niaria-busy, niaria-live. Un lecteur d'écran ne sait pas que le contenu charge. Ajoutezrole="status" aria-label="Chargement en cours" aria-live="polite"sur.loader-wave, ou gérez l'état viaaria-busy="true"sur la région parente. - Les cinq
spansont des éléments vides. Ajoutezaria-hidden="true"sur le conteneur.loader-wavepour les exclure de l'arbre d'accessibilité : le message porté pararia-labelsera alors le seul texte annoncé. - Contraste :
#6366f1sur#0a0a0f(fond de la démo) = 5,5:1 ; sur blanc = 4,5:1 — les barres passent le seuil de 3:1 des éléments graphiques sur ces deux fonds. Sur un fond gris clair (#e5e7eb), le ratio tombe à 2,1:1 : remplacez par#4338ca(8,2:1 sur blanc) ou posez un fond sombre derrière le loader.
Compatibilité navigateur
CSS pur : requiert @keyframes, transform : scaleY(), animation-delay négatif et display : flex avec gap. Zéro dépendance, zéro JavaScript. Le facteur limitant est gap sur flexbox.
Sans support de gap sur flex (Chrome < 84, Safari < 14.1), les barres se collent les unes aux autres : remplacez gap : 4px par margin-right : 4px sur .loader-wave span et ajoutez .loader-wave span:last-child { margin-right : 0 }. Sans animations CSS (IE 9), les cinq barres s'affichent figées à 50 px de hauteur.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="loader-wave">
<span></span>
<span></span>
<!-- … 5 barres au total —
chaque span a son animation-delay dans le CSS -->
</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 |
|---|---|---|
| Nombre de barres (HTML — spans + CSS — nth-child avec animation-delay) | 5 | Chaque barre ajoutée nécessite un nth-child avec un délai décrémenté de 0,1 s. Pour 6 barres : la 6ᵉ reçoit animation-delay : −0,7 s. En réduisant à 3 barres, le loader tient dans 22 × 50 px. |
Hauteur de la zone (CSS — .loader-wave { height : 50px }) |
50 px | Hauteur de référence des barres. La hauteur minimale rendue vaut hauteur × .4 (20 px), la maximale est cette valeur. 32px pour un bouton ; 80px pour un affichage audio large. |
Largeur des barres (CSS — .loader-wave span { width : 6px }) |
6 px | Largeur de chaque barre, indépendante de la hauteur. 4px pour un indicateur discret ; 10px pour un grand affichage de type VU-mètre. |
Écart entre barres (CSS — .loader-wave { gap : 4px }) |
4 px | Gouttière entre barres. 2px = barres quasi jointives (densité égaliseur) ; 8px = barres bien aérées. |
Couleur (CSS — .loader-wave span { background : #6366f1 }) |
#6366f1 | Couleur unie des cinq barres. Pour un dégradé vertical, remplacez background par background : linear-gradient(to top, #6366f1, #a5b4fc). |
Durée du cycle (CSS — animation : 1.2s … sur les span) |
1,2 s | Durée d'un cycle complet. 0,8 s = onde rapide ; 2 s = rythme lent. Changer la durée ne modifie pas les décalages relatifs entre barres — l'onde reste cohérente. |
Stagger entre barres (CSS — pas entre les animation-delay) |
0,1 s par barre (0,4 s au total sur 5 barres) | Décalage entre deux barres consécutives. Le temps de traversée de l'onde = (n − 1) × stagger. Avec 0,2 s, l'onde prend 0,8 s à traverser les 5 barres. Conservez des délais négatifs pour que l'animation soit déjà visible au chargement. |
Amplitude (CSS — @keyframes wave : scaleY(.4) min, scaleY(1) max) |
scaleY de .4 à 1 (20 px à 50 px) | Hauteur minimale et maximale de chaque barre. scaleY(.2) = barres très fines au repos (10 px) ; scaleY(0) = barres qui disparaissent entièrement (elles ressemblent alors à des points qui pulsent verticalement). |
FAQ
scaleY(.4), jamais à scaleY(0) : sur une zone de height : 50px, la hauteur rendue minimale est 20 px (mesurée exactement en Chromium). Pour que les barres s'effacent complètement, remplacez scaleY(.4) par scaleY(0) dans les trois positions à ce niveau (0 %, 40 % et 100 %) — l'aspect ressemble alors davantage à des bâtonnets qui surgissent et disparaissent.span dans le HTML et une règle nth-child en CSS avec un délai décrémenté de 0,1 s. Pour la nᵉ barre (en partant de 1) : animation-delay : −(1,2 − (n − 1) × 0,1) s. Pour 6 barres : la 6ᵉ a −0,7 s ; pour 7 barres : la 7ᵉ a −0,6 s. Si le nombre de barres est grand, réduisez le stagger (ex. 0,05 s) pour que le délai de la dernière barre reste négatif.requestAnimationFrame + deux sinusoïdes superposées), sur une zone pleine largeur. Wave Bars (fx-0426) est un ensemble de cinq barres discrètes, pur CSS, qui simulent un affichage d'égaliseur ou de niveaux VU. Wave Form est un oscilloscope — une forme d'onde fluide destinée à un fond animé ; Wave Bars est un indicateur de chargement compact (46 × 50 px), sans JavaScript, adapté à un composant d'interface.
