Cube Grid
Neuf cubes 14 px en grille CSS 3 × 3 ; réduits à zéro à 35 % du cycle de 1,3 s ; délai (rang + col) × 0,1 s — vague diagonale de 0 à 0,4 s. Aucun 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 HTML vendu contient un .loader-cube-grid avec 9 <span>. La grille mesure 54 × 54 px : display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px. Chaque cube fait 14 × 14 px, border-radius: 2px, fond #6366f1. Mesuré en Chromium : la colonne calculée vaut 15,33 px — (54 − 2 × 4) / 3 —, les 0,67 px de marge libre de chaque côté ne modifient pas le rendu visuel. Aucun JavaScript : l'effet est entièrement CSS.
L'animation cubeGridScale (1,3 s, ease-in-out, infini) se déroule en trois phases mesurées. De 0 à 35 % (0,455 s), chaque cube passe de scale(1) à scale(0) et de #6366f1 (indigo) à #d946ef (fuchsia) — le cube « disparaît » au moment où sa couleur change. De 35 à 70 % (0,455 s), il revient à scale(1) et à #6366f1. De 70 à 100 % (0,39 s), il reste stable à pleine taille, indigo — 30 % du cycle de repos avant de recommencer.
Le délai de chaque cube suit la formule (rang + colonne) × 0,1 s (indices à partir de 0) : le cube (0, 0) démarre à 0 s, les cubes (0, 1) et (1, 0) à 0,1 s, les cubes (0, 2), (1, 1) et (2, 0) à 0,2 s, les cubes (1, 2) et (2, 1) à 0,3 s, le cube (2, 2) à 0,4 s. Les trois anti-diagonales se déclenchent successivement — la vague traverse la grille du coin supérieur gauche au coin inférieur droit en 0,4 s, soit moins d'un tiers du cycle.
Accessibilité
- prefers-reduced-motion absent : aucune règle
@media (prefers-reduced-motion: reduce)dans le code — mesuré sous émulation Playwright, les 9 animationscubeGridScalecontinuent de tourner,animationPlayState: running. Ajoutez@media (prefers-reduced-motion: reduce) { .loader-cube-grid span { animation: none } }pour figer les cubes à taille pleine. - Un indicateur de chargement doit être annoncé aux technologies d'assistance. Le code ne fournit aucune sémantique : ajoutez
role="status" aria-label="Chargement en cours"sur.loader-cube-grid, ouaria-busy="true"sur l'élément couvert. Si un parent porte déjà ce rôle, posezaria-hidden="true"sur la grille elle-même. - Les 9
<span>sont vides et muets. Aucun texte, aucune interaction, aucun événement clavier : l'effet est purement passif — aucun risque de conflit de focus ni de piège au clavier. - Contraste non applicable : les cubes sont des éléments graphiques décoratifs (seuil 3:1 non requis pour les composants d'interface passifs). Ils font 14 px sur fond
#0a0a0f: l'indigo#6366f1mesure 4,0:1 et le fuchsia#d946ef4,8:1 — les deux passent le seuil 3:1.
Compatibilité navigateur
Requiert display: grid, grid-template-columns, gap sur une grille, et @keyframes avec transform: scale() et un changement de background. Aucune variable CSS du design system, aucune dépendance.
Sans display: grid (IE 11 utilise une syntaxe préfixée partielle), les 9 spans s'affichent en ligne. Sans @keyframes, 9 carrés indigo statiques — pas un rendu cassé, juste l'absence d'animation.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="loader-cube-grid">
<span></span>
<span></span>
<!-- … 9 spans au total -->
</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 |
|---|---|---|
Taille des cubes (CSS — width/height sur .loader-cube-grid span) |
14px | La grille ne s'adapte pas automatiquement : ajustez aussi width/height de .loader-cube-grid (3 × taille + 2 × gap). À 8 px (gap 2 px) la grille fait 28 px — tient dans un bouton compact. |
Écart entre cubes (CSS — gap sur .loader-cube-grid) |
4px | 2px : cubes serrés, l'ensemble paraît presque solide ; 6px : grille aérée, chaque cube est distinct. À 0, les cubes sont jointifs. |
Couleur de repos (CSS — background: #6366f1 sur .loader-cube-grid span et keyframe 0 %/70 %/100 %) |
#6366f1 (indigo) | Couleur visible pendant 70 % du cycle. Les deux occurrences (règle de base et keyframe) doivent correspondre — la règle de base s'affiche avant le premier cycle. |
Couleur au minimum (CSS — keyframe 35 %, background: #d946ef) |
#d946ef (fuchsia) | Couleur visible pendant la transition vers scale(0) et le retour. Elle reste perceptible même si le cube est très petit au passage à 0. |
Durée du cycle (CSS — 1.3s sur .loader-cube-grid span) |
1,3 s | 0,8 s : vague rapide ; 2 s : rythme lent, quasi décoratif. En dessous de 0,5 s, le délai maximal de 0,4 s représente 80 % du cycle et le motif diagonale disparaît — raccourcissez aussi les délais. |
Rythme de la vague (CSS — délais des neuf règles nth-child) |
0,1 s par rang diagonal (0 s à 0,4 s) | 0,05 s par pas : cubes presque simultanés, vague très rapide (délai max 0,2 s) ; 0,2 s : décalage marqué (délai max 0,8 s). Les neuf valeurs à recalculer à la main : (rang + col) × incrément. |
Nombre de colonnes et de cubes (CSS — repeat(3, 1fr) ; HTML — nombre de <span>) |
3 colonnes, 9 cubes | Une grille 4 × 4 (16 spans, délais de 0 à 0,6 s) ou 2 × 2 (4 spans, délais de 0 à 0,2 s) fonctionne avec le même pattern — adaptez grid-template-columns, la taille de la grille et les règles nth-child. |
FAQ
rotateX −180° puis rotateY −180°) en 1,2 s — un seul élément, une perspective, une rotation. Cube Grid est neuf cubes mis à l'échelle 2D en vague diagonale : aucune rotation, aucune perspective, neuf éléments. Les deux partagent la couleur #6366f1 mais n'ont aucun code commun dans leurs propres fichiers.(4 − rang − col) × 0,1 s (indices 0-based) : nth-child(1) → 0,4 s, nth-child(2) → 0,3 s, nth-child(3) → 0,2 s, nth-child(4) → 0,3 s, nth-child(5) → 0,2 s, nth-child(6) → 0,1 s, nth-child(7) → 0,2 s, nth-child(8) → 0,1 s, nth-child(9) → 0 s.js du fichier vendu est vide. Tout repose sur @keyframes et les neuf règles nth-child. Aucune initialisation, aucun écouteur d'événement, aucune dépendance — coller le HTML et le CSS dans la page suffit.
