Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces ✨ Passer Premium
Chargement✨ Premium

Bouncing Squares

Trois carrés de 15 px, fond #6366f1, border-radius: 0 — rebond de 20 px avec compression à 80 %, en cascade de 100 ms. Pur CSS, aucun JavaScript.

CSSPlayful

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 →

Voir dans le catalogue Compte gratuit

3 exemples d'usage

Traitement d'un lot de photos — export en cours — Bouncing Squares exemple 1

① Traitement d'un lot de photos — export en cours

QuandOutil de retouche ou de publication : l'export de 40 images est lancé (redimensionnement 2048 px, JPEG). Les fichiers passent l'un après l'autre ; le compteur donne l'avancement, le loader donne le rythme de la file.
PourquoiUn carré est une vignette : trois carrés côte à côte se lisent comme une file d'images, ce qu'aucun cercle ne suggère. La cascade de gauche à droite — 100 ms d'écart entre chaque carré — dit l'ordre de passage : la première image est traitée, la suivante arrive. Un anneau tournant ne dirait que « patientez ». Le compteur « 12 sur 40 traitées » porte la mesure, le loader porte la file. Portés à 24 px, les carrés restent nets à côté de vignettes de 44 px.
RéglagesCarrés 24 × 24 px, gap: 12px, translateY(-32px) (20 px × 24/15 : l'amplitude suit la taille), couleur #6366f1 par défaut, durée .8s (rythme légèrement plus vif, la file avance) ; loader posé au bas d'une boîte de 56 px pour laisser la place au rebond, à gauche du compteur, role="status" sur la barre d'état.
Application éducative pour enfants — entre deux exercices — Bouncing Squares exemple 2

② Application éducative pour enfants — entre deux exercices

QuandApplication d'apprentissage pour les 6-9 ans : l'exercice est réussi, l'écran de félicitations s'affiche et le suivant se charge. Deux ou trois secondes qui doivent rester dans le jeu.
PourquoiTrois blocs qui sautent l'un après l'autre en se tassant au sommet : c'est le vocabulaire du dessin animé (le squash-and-stretch du scale(.8), ici poussé à .6), pas celui d'un logiciel de gestion. Un anneau ou une barre ramènerait l'enfant dans un monde d'adultes en plein écran de récompense. La durée de 0,7 s rend le saut vif, et une couleur par carré — permise par les règles :nth-child — fait des trois carrés des cubes de jeu. À 24 px sur fond clair, ils se lisent sur une tablette tenue à bout de bras.
RéglagesCarrés 24 × 24 px, gap: 12px, keyframe dédiée translateY(-32px) scale(.6), durée .7s, trois couleurs via :nth-child(1) #2563eb, (2) #ea580c, (3) #16a34a sur fond crème #fff7ed (contraste ≥ 3,1:1) ; libellé visible « Le prochain exercice arrive… » sous le loader, role="status" sur le bloc d'attente.
Tableau kanban à l'ouverture — les colonnes se remplissent — Bouncing Squares exemple 3

③ Tableau kanban à l'ouverture — les colonnes se remplissent

QuandOutil de gestion de projet : le tableau s'ouvre, les en-têtes de colonnes sont là, les cartes arrivent colonne après colonne depuis l'API. Le squelette des cartes reste visible derrière l'indicateur.
PourquoiTrois carrés pour trois colonnes : chaque carré prend la couleur de sa colonne (à faire, en cours, terminé) et le rebond de gauche à droite suit le sens de lecture du tableau — celui dans lequel les cartes vont apparaître. La forme carrée fait écho aux cartes elles-mêmes ; un cercle n'aurait rien à voir avec ce qui s'affiche ensuite. La durée portée à 1,4 s donne un rythme posé, celui d'un écran qui se construit plutôt que d'un calcul qui tourne.
RéglagesCarrés 24 × 24 px, gap: 12px, translateY(-32px), durée 1.4s, couleurs par carré :nth-child(1) #818cf8, (2) #f59e0b, (3) #34d399 — celles des pastilles carrées des en-têtes de colonnes ; centré dans une boîte flottante au-dessus des colonnes en squelette (opacité 0,5), role="status" sur la boîte.

Comment ça marche

Le conteneur .loader-squares est un flex d'une ligne, gap: 8px, sans hauteur explicite. Ses trois enfants span mesurent chacun 15 × 15 px, fond #6366f1, border-radius: 0 — des carrés à angles francs, pas des cercles. Mesurés dans Chromium : 14,77 à 15,00 px selon la phase d'animation au moment de la capture. Aucune variable CSS, aucun JavaScript.

La keyframe squareBounce applique deux transformations simultanément à 50 % du cycle : translateY(-20px) et scale(.8), puis revient à translateY(0) scale(1) aux deux extrémités. Mesurée au sommet dans Chromium, la matrice affiche scale(0,800) et un décalage vertical de −20 px : le carré remonte exactement 20 px et occupe alors 12 × 12 px. Le scale(.8) n'est pas un effet de profondeur — c'est la technique du « squash-and-stretch » : un objet élastique qui ralentit en haut de sa course se comprime légèrement, ce que cette seule valeur reproduit sans ombre ni élément secondaire.

Les délais positifs 0 s, 0,1 s et 0,2 s décalent les trois carrés de 100 ms l'un après l'autre. Comme les délais CSS positifs ne jouent qu'au premier cycle, les cycles suivants se superposent en cascade permanente : au régime établi, le premier carré est au sommet quand le deuxième atteint la mi-montée et le troisième quitte le sol. L'œil perçoit une vague de gauche à droite à 1 Hz (un cycle complet par seconde).

Accessibilité

  • prefers-reduced-motion absent du code : mesuré avec émulation reducedMotion: 'reduce', les trois animations restent à l'état running. Il n'y a aucune règle @media (prefers-reduced-motion: reduce). Pour respecter la préférence, ajoutez @media (prefers-reduced-motion: reduce) { .loader-squares span { animation: none; } } — les carrés deviennent statiques, repli honnête pour un indicateur.
  • role, aria-live et texte alternatif absents : pour un indicateur de chargement fonctionnel, ajoutez role="status" aria-live="polite" sur .loader-squares et un <span class="sr-only">Chargement…</span> à l'intérieur ; retirez-le dès la fin du chargement. Si le loader est purement décoratif (un texte visible indique l'état), posez aria-hidden="true" sur le conteneur.
  • Contraste : #6366f1 sur #0a0a0f (fond du site) = 4,5:1 — au-dessus du seuil 3:1 des composants graphiques non textuels (WCAG 1.4.11). Vérifiez avec votre propre fond si vous changez la couleur.
  • Intégration : les trois span forment une boîte de 61 × 15 px au repos (mesurée : 3 × 15 px + 2 × 8 px = 61 px). Lors du rebond, les carrés débordent de 20 px vers le haut — prévoyez au moins 35 px de hauteur dans le conteneur parent et évitez overflow: hidden sur ce dernier.

Compatibilité navigateur

Animations CSS et transformations 2D : propriétés disponibles dans tous les navigateurs courants depuis 2012. Aucun JavaScript, aucune variable CSS, aucune dépendance.

Chrome 43+✓ Complet
Firefox 16+✓ Complet
Safari 9+✓ Complet
Edge 12+✓ Complet
Mobile iOS✓ Complet
Android Chrome✓ Complet

Sans prise en charge des @keyframes CSS, les trois carrés restent immobiles à leur position de repos. Aucun contenu n'est perdu, mais l'indicateur cesse de signaler — prévoyez un texte alternatif si l'état de chargement est fonctionnel.

Le code

Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :

index.html — structure 
<div class="loader-squares">
  <span></span>
  <span></span>
  <span></span>
</div>
🔒 Débloquer le code complet — à partir de 2,99 € le 1er mois

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éfautEffet
Couleur (CSS — background: #6366f1) #6366f1 Couleur de remplissage des trois carrés. Modifiez la valeur sur .loader-squares span pour les changer tous d'un coup. Pour des couleurs par carré, ajoutez :nth-child(1), (2), (3) avec chacun leur background.
Taille (CSS — width: 15px; height: 15px) 15 × 15 px Dimensions des carrés. Changez les deux ensemble pour garder la forme carrée. 8 px pour un bouton ; 24 px pour un grand indicateur. L'amplitude de saut reste absolue : ajustez translateY en proportion.
Amplitude de montée (CSS — translateY(-20px)) −20 px Hauteur maximale atteinte à 50 % du cycle, en valeur absolue. Avec des carrés de 8 px, -10px garde les proportions. -30px avec 15 px allonge la trajectoire sans changer la durée, ce qui rend le mouvement visuellement plus rapide.
Compression au sommet (CSS — scale(.8)) 0,8 (80 % de la taille) Facteur de mise à l'échelle à mi-animation. scale(1) supprime le squash-and-stretch : les carrés montent sans rétrécir — effet plus mécanique. scale(.6) accentue la compression et rend l'animation plus expressive.
Durée du cycle (CSS — animation: 1s) 1 s Durée d'un rebond complet par carré. .7s donne un rythme nerveux ; 1.4s un mouvement posé. Le décalage relatif (100 ms sur 1 s = 10 % du cycle) reste proportionnel si vous modifiez aussi les délais.
Décalage entre carrés (CSS — animation-delay: .1s et .2s) 0 s / 0,1 s / 0,2 s 100 ms d'écart entre chaque carré, soit 10 % du cycle. .15s et .3s élargissent la cascade (15 %) ; 0s pour les trois les synchronise en un saut simultané.
Espacement (CSS — gap: 8px) 8 px Espace entre les carrés. 4px pour un groupe compact (bouton) ; 12px pour aérer l'indicateur. Largeur totale au repos : 3 × taille + 2 × gap — avec 15 px et 8 px, 61 px.

FAQ

Le scale(.8) à 50 % reproduit le « squash-and-stretch » : un objet élastique qui décélère en haut de sa course se comprime légèrement. Ici, la réduction à 80 % de la taille suffit à créer cette illusion sans ombre ni calque supplémentaire. Retirez le scale et les carrés montent en ligne droite : visuellement plus sec, moins dynamique.
Trois points de divergence. Forme : fx-0422 utilise des cercles (border-radius: 50%), fx-0433 des carrés (border-radius: 0). Transformation : fx-0422 passe de scale(0) à scale(1) — les points apparaissent et disparaissent — alors que fx-0433 combine translateY et scale(.8) sans jamais réduire à zéro. Timing : fx-0422 utilise des délais négatifs (−0,32 s et −0,16 s) qui entrent immédiatement en régime ; fx-0433 utilise des délais positifs (0,1 s et 0,2 s) qui créent un démarrage progressif visible au premier chargement.
Ajoutez un <span></span> dans le HTML et la règle .loader-squares span:nth-child(4) { animation-delay: .3s } (et :nth-child(5) { animation-delay: .4s } pour cinq). Le CSS de base ne change pas : tous les span héritent de .loader-squares span. Largeur totale : 4 × 15 px + 3 × 8 px = 84 px ; 5 × 15 px + 4 × 8 px = 107 px.