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

Rainbow Shimmer

Carte squelette 280×296 px, 7 os (avatar 48×48 px, titre/sous-titre, zone image 120 px, 3 lignes), chacun traversé par un shimmer de 7 bandes arc-en-ciel (rouge→violet, opacité 0,15) animé de gauche à droite en 2,5 s. Entièrement CSS, aucun JavaScript.

CSSRainbowGradient

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

Génération d'image en cours — interface IA — Rainbow Shimmer exemple 1

① Génération d'image en cours — interface IA

QuandUn prompt a été soumis et le modèle produit une image. La carte squelette arc-en-ciel remplace l'emplacement de l'image pendant les 3 à 15 s de traitement.
PourquoiLe shimmer coloré signale visuellement que le résultat attendu sera une image riche en couleurs — l'arc-en-ciel est sémantiquement cohérent avec la promesse. Un shimmer gris neutraliserait ce signal ; un shimmer coloré le renforce.
RéglagesAvatar supprimé, titre à width: 70%, zone image portée à height: 200px, les trois lignes conservées pour les métadonnées (modèle, dimensions). Opacité des bandes montée à .25 pour renforcer la visibilité dans une UI claire.
Fil de projets créatifs — plateforme type Behance — Rainbow Shimmer exemple 2

② Fil de projets créatifs — plateforme type Behance

QuandPremier chargement d'un feed de créations : 3 à 4 cartes côte à côte, chacune avec avatar d'auteur, titre de projet, aperçu et tags.
PourquoiSur une plateforme dont tout le contenu est visuel et coloré, un placeholder arc-en-ciel est cohérent avec la charte et la promesse du feed. Le cycle de 2,5 s, plus lent que les shimmer neutres voisins (1,5–1,8 s), donne un rythme calme adapté à la découverte.
Réglageswidth: 260px, avatar réduit à 40×40 px, zone image à height: 100px, cartes en display: flex; gap: 16px, les décalages animation-delay des colonnes décalés de 0,3 s entre cartes.
Boutique de thèmes et de palettes — les vignettes colorées arrivent — Rainbow Shimmer exemple 3

③ Boutique de thèmes et de palettes — les vignettes colorées arrivent

QuandOuverture du rayon « Nouveautés » d'une boutique de thèmes d'interface et de palettes : la première carte est déjà là (aperçu à cinq couleurs, auteur, prix), les suivantes se chargent en grille pendant la requête au catalogue, 1 à 3 s.
PourquoiCe que la boutique vend, c'est de la couleur : chaque vignette attendue est une palette ou un thème. Le balayage rouge→violet annonce donc au sens propre ce qui va s'afficher dans le cadre, et la carte déjà chargée à côté en fait la preuve — un shimmer blanc ou gris promettrait un contenu neutre que la vignette contredirait à l'instant où elle apparaît. Il faut aussi une surface pour porter sept bandes : dans une zone image de 210×110 px, le dégradé se lit teinte par teinte, ce qu'un spinner ou trois points ne peuvent pas faire.
Réglageswidth: 240px, deux colonnes en display: grid; gap: 16px, rembourrage à 14px, avatar réduit à 32×32 px, zone image à height: 110px, lignes réduites à deux (format et prix). Bandes montées à .35 (bleu .38), dans la plage .30–.40 prévue pour fond sombre, afin que l'arc-en-ciel tienne face à la vignette déjà chargée. Deuxième carte décalée de animation-delay: .3s, deuxième rangée de .6s.

Comment ça marche

La carte .rainbow-skel (280 px de large, 20 px de rembourrage, fond rgba(255,255,255,.03), bordure rgba(255,255,255,.06), coins à 16 px) regroupe 7 os : un cercle d'avatar 48×48 px (.rainbow-bone-circle), deux barres de titre et sous-titre (14 et 10 px de haut, 65 % et 45 % de la colonne de droite), une zone image 120 px de haut, et trois lignes de texte de 10 px. Tous les os portent background: rgba(255,255,255,.06) — la silhouette sur fond sombre — et overflow: hidden, qui clippe le pseudo-élément du shimmer à la bordure de chaque os.

Le shimmer est un ::after en position: absolute; inset: 0 portant un linear-gradient(90deg, ...) en sept bandes colorées — rouge rgba(255,50,50,.15) à 15 %, orange à 25 %, jaune à 35 %, vert à 45 %, bleu rgba(0,180,255,.18) à 55 %, indigo à 65 %, violet à 75 % — sur fond transparent, avec background-size: 300% 100% : le gradient fait trois fois la largeur de l'os. L'animation rainbowSlide déplace background-position de -300% 0 à 300% 0 en 2,5 s ease-in-out infini, soit un balayage de 600 % au total. La fenêtre visible (100 % de l'os) traverse successivement les sept teintes lors de chaque cycle. L'opacité maximale est de 0,18 (bleu) sur la base rgba(255,255,255,.06) : le dégradé est délibérément translucide pour rester discret sur un fond sombre.

Quatre décalages de démarrage sont appliqués via nth-child : .rainbow-skel-title::after (1er enfant de son parent) → 0 s ; .rainbow-skel-subtitle::after (2e) → 0,1 s ; .rainbow-skel-img::after (2e enfant de .rainbow-skel) → 0,1 s ; 1re ligne (3e enfant) → 0,2 s. Les 2e et 3e lignes (4e et 5e enfants) ne correspondent à aucune règle et repartent à 0 s, en phase avec l'avatar et le titre. Par ailleurs, .rainbow-skel-line:nth-child(2) { width: 93% } cherche une ligne qui serait le 2e enfant de .rainbow-skel — rôle occupé par .rainbow-skel-img : la règle ne s'applique à rien (mesuré : lignes 1 et 2 à 100 %, seule la 3e passe à 64 % via :last-child). Il n'y a aucun JavaScript ; le champ js du code vendu est vide.

Accessibilité

  • prefers-reduced-motion absent du code : mesuré, aucune règle @media (prefers-reduced-motion) n'est présente ; sous cette préférence, l'animation rainbowSlide tourne sans interruption. Ajoutez : @media (prefers-reduced-motion: reduce) { .rainbow-bone::after, .rainbow-bone-circle::after { animation: none } }.
  • Le HTML vendu ne contient aucun attribut ARIA pour l'indicateur de chargement. Le conteneur .rainbow-skel doit porter role="status", aria-busy="true" et aria-label="Chargement en cours" (ou équivalent) pendant l'attente ; basculez aria-busy à false et retirez le squelette dès que le contenu réel s'affiche.
  • Les 7 os vides ne doivent pas être parcourus par les lecteurs d'écran. Ajoutez aria-hidden="true" sur .rainbow-skel (un lecteur énumérerait sinon sept éléments muets).
  • Contraste : les os (rgba(255,255,255,.06) ≈ #111) sur fond #0a0a0f mesurent ~1,0:1 — intentionnel, ce sont des formes décoratives, pas du texte. Le shimmer arc-en-ciel (éléments graphiques, seuil 3:1) est trop translucide pour être mesuré de façon significative. Sur un fond blanc sans le .demo-preview { background: #0a0a0f } du CSS vendu, les os disparaissent dans le blanc.

Compatibilité navigateur

Requiert inset (raccourci top/right/bottom/left), linear-gradient, animation sur pseudo-éléments, background-size et background-position animé. Aucune propriété personnalisée, pas de clip-path ni de mix-blend-mode.

Chrome 87+✓ Complet
Firefox 87+✓ Complet
Safari 14.1+✓ Complet
Edge 87+✓ Complet
Mobile iOS 14.5+✓ Complet
Android Chrome✓ Complet

Sans inset (antérieur à 2021), le ::after n'est pas positionné sur l'os : le shimmer arc-en-ciel disparaît mais les os eux-mêmes restent visibles, formant un squelette statique. Sans animation sur pseudo-éléments (IE), le squelette est statique.

Le code

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

index.html — structure 
<div class="rainbow-skel">
  <div class="rainbow-skel-header">
    <div class="rainbow-bone-circle rainbow-skel-avatar"></div>
    <div style="flex:1">
      <div class="rainbow-bone rainbow-skel-title"></div>
      <div class="rainbow-bone rainbow-skel-subtitle"></div>
    </div>
  </div>
  <div class="rainbow-bone rainbow-skel-img"></div>
  <!-- 3 lignes au total -->
  <div class="rainbow-bone rainbow-skel-line"></div>
  <div class="rainbow-bone rainbow-skel-line"></div>
  <div class="rainbow-bone rainbow-skel-line"></div>
</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
Durée du cycle (CSS — animation: 2.5s) 2,5 s ease-in-out infini Vitesse du balayage arc-en-ciel sur chaque os. 1.5s = shimmer vif, sensation d'activité soutenue ; 4s = ondulation lente, ambiance plus contemplative. Changez la valeur dans la déclaration animation du ::after.
Opacité des bandes colorées (CSS — .15 / .18) 0,15 pour six bandes, 0,18 pour le bleu Intensité visible du dégradé arc-en-ciel. Sur fond sombre #0a0a0f, .30–.40 donne un shimmer plus marqué ; sur fond clair, montez à .50–.60 et portez aussi la base des os à rgba(255,255,255,.10).
Couleur de base des os (CSS — .rainbow-bone { background: rgba(255,255,255,.06) }) rgba(255,255,255,0.06) Teinte et opacité de la silhouette de l'os au repos. Sur fond clair, utilisez rgba(0,0,0,.08) pour rendre les os visibles ; sur fond coloré, adaptez la teinte pour la cohérence.
Largeur de la carte (CSS — .rainbow-skel { width: 280px }) 280 px Largeur fixe du squelette. Passez à 100% pour remplir un conteneur fluide ; les os en pourcentage (65 %, 45 %, 93 %) suivent automatiquement.
Hauteur de la zone image (CSS — .rainbow-skel-img { height: 120px }) 120 px Adapte le squelette à la proportion réelle de l'image attendue : 80px pour une vignette carrée, 200px pour un format paysage large, 56.25% en aspect-ratio: 16/9 pour un contenu vidéo.
Décalages du stagger (CSS — animation-delay: 0s / .1s / .2s) 0 s, 0,1 s, 0,1 s, 0,2 s (les 2 dernières lignes restent à 0 s — cf. défaut mesuré) Pour une cascade propre sur les 7 os, remplacez les règles nth-child par des sélecteurs explicites : .rainbow-skel > .rainbow-bone:nth-child(3)::after { animation-delay: .2s }, :nth-child(4)::after { animation-delay: .3s }, :nth-child(5)::after { animation-delay: .4s }.
Largeur du gradient (CSS — background-size: 300% 100% + keyframes -300%→300%) 300 % (gradient 3× large), balayage de 600 % Un gradient plus large (400%) étire les bandes et les transitions sont plus douces mais le cycle est plus long à parcourir visuellement. Changez les trois valeurs en cohérence : background-size et les deux background-position des keyframes.

FAQ

La règle .rainbow-skel-line:nth-child(2) { width: 93% } cible un élément qui est à la fois .rainbow-skel-line et le 2e enfant de son parent. Dans le HTML vendu, le 2e enfant de .rainbow-skel est .rainbow-skel-img, pas une ligne de texte — les lignes occupent les positions 3, 4 et 5. La règle ne correspond à aucun élément (mesuré : lignes 1 et 2 à 238 px = 100 %, ligne 3 à 152 px = 64 % via :last-child). Pour corriger, ciblez par position dans .rainbow-skel : .rainbow-skel > .rainbow-bone:nth-child(4) { width: 93% } donne 93 % à la 2e ligne sans toucher à l'image.
Deux différences principales. Le gradient : Rainbow Shimmer utilise 7 bandes de couleur (rouge→violet) à 0,15 d'opacité ; Wave Shimmer est un dégradé blanc (0,04→0,14→0,04) sans couleur. Le mouvement : Wave Shimmer ajoute un léger scaleY oscillant (1→1,02→0,98→1 sur 2,2 s) qui donne aux os un léger mouvement vertical respirant ; Rainbow Shimmer se déplace strictement horizontalement en 2,5 s. Choisir Wave Shimmer pour une interface sobre ; Rainbow Shimmer quand la palette du contenu à venir justifie un signal coloré.
Non sans adaptation. Le code est conçu pour fond sombre : la base des os est rgba(255,255,255,.06) — sur blanc, ils deviennent quasi invisibles. Remplacez la base par rgba(0,0,0,.08) pour les rendre visibles sur fond clair. Montez ensuite les opacités des bandes arc-en-ciel à .40–.50 pour que le dégradé reste lisible au-dessus des os sombres.