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

Dashboard Skeleton

Seize os en shimmer synchrone — 3 cartes de KPI, une zone graphique de 80 px, 3 lignes de tableau — CSS pur, 1,8 s, zéro JavaScript.

CSSShimmerDashboard

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

Tableau de bord de monitoring — vue d'ensemble d'une app d'infrastructure — Dashboard Skeleton exemple 1

① Tableau de bord de monitoring — vue d'ensemble d'une app d'infrastructure

QuandÀ l'ouverture ou au rechargement de l'onglet « Vue d'ensemble » d'un outil de surveillance (CPU, mémoire, requêtes par seconde) avant que les métriques temps réel ne reviennent du serveur.
PourquoiLa forme composite — 3 KPI + zone graphique + tableau — reproduit fidèlement la mise en page cible : l'utilisateur reconnaît la zone en préparation sans lire aucun texte. Un spinner n'indiquerait pas la densité du contenu qui arrive ; un skeleton générique de lignes ne préparerait pas le regard à la même structure.
RéglagesPorter .dash-skel-chart { height: 120px } pour un graphe temps réel plus haut ; aligner .dash-skel-cell1/2/3 sur les vraies largeurs de colonnes du tableau cible pour une transition sans saut.
Écran mural d'une salle de supervision — les tableaux tournent, chaque bascule laisse une seconde de squelette — Dashboard Skeleton exemple 2

② Écran mural d'une salle de supervision — les tableaux tournent, chaque bascule laisse une seconde de squelette

QuandSur le mur d'une salle de supervision (NOC), un écran sans clavier ni souris enchaîne six tableaux en rotation automatique, un toutes les 20 s ; à chaque bascule, les métriques du tableau suivant mettent environ une seconde à arriver.
PourquoiPersonne n'interagit avec cet écran : la bascule n'est signalée par rien d'autre que ce qui s'affiche pendant cette seconde. Un spinner ou une barre de progression serait un point à cinq mètres ; ici le squelette occupe tout le cadre et dessine à l'avance la silhouette exacte du tableau qui arrive — trois compteurs, une courbe, des lignes — si bien que l'opérateur, du fond de la salle, sait que la rotation a avancé et lit déjà la structure avant le premier chiffre. Les 16 os balayés en phase (animation-delay: 0s sur tous les ::after) forment une seule raie qui traverse l'écran, lisible à distance là où une cascade ou un indicateur par tuile se perdrait.
Réglages.dash-skel { width: 100% } pour occuper toute la largeur de l'écran (504 px ici, contre 310 par défaut). Ramener l'animation de 1.8s à 1s : avec ease-in-out et un dégradé de 200 %, le pic de la raie n'entre dans les os qu'à 0,90 s d'un cycle de 1,8 s et n'en sort qu'à 1,18 s — pendant la seconde de bascule, il n'a pas fini de les traverser ; à 1 s, il les traverse entre 0,50 et 0,65 s. Porter le pic du dégradé de rgba(255,255,255,.1) à .18 pour que la raie reste visible à distance ; hauteur de graphe de 80 px et colonnes 30 / 45 / 20 % conservées.
Rapport hebdomadaire SaaS — résumé affiché à la connexion — Dashboard Skeleton exemple 3

③ Rapport hebdomadaire SaaS — résumé affiché à la connexion

QuandÀ la connexion sur un outil d'email marketing, avant que les métriques de la semaine (clics, taux d'ouverture, conversions) ne reviennent du serveur.
PourquoiL'utilisateur sait qu'un rapport est en préparation. La structure tableau de bord — chiffres, courbe, lignes — lui indique ce qu'il va trouver, réduisant l'anxiété d'attente. Un loader générique ne dirait pas « il y a un tableau de données ».
RéglagesAucune modification nécessaire pour une attente < 3 s. Si le rapport prend plus longtemps, ajouter animation-delay: .15s sur les .skel-bone::after de la 2è carte et .3s sur la 3è pour un léger effet cascade.

Comment ça marche

Le conteneur .dash-skel mesure 310 × 222 px (mesuré), padding 14 px, fond rgba(255,255,255,.02), bordure à 5 % d'opacité. Il abrite trois zones empilées. La première : 3 cartes de statistiques en grille CSS 3 colonnes (grid-template-columns: 1fr 1fr 1fr, gap 8 px) — chaque carte contient deux os, un label de 8 px de haut (60 % de la carte, soit 41 px mesuré) et une valeur de 18 px de haut (50 %, soit 34 px). La deuxième : un os de zone graphique (.dash-skel-chart, 280 × 80 px mesuré, 100 % de la largeur interne du conteneur). La troisième : 3 lignes de tableau à 3 cellules chacune ; la première ligne utilise les largeurs CSS par défaut (30 % / 45 % / 20 %), les deux suivantes imposent des largeurs différentes en attribut style (25 % et 35 % pour la première colonne), simulant des contenus de longueur variable. Décompte total : 16 .skel-bone, tous présents dans le HTML vendu, aucun créé par script.

Le shimmer est entièrement en CSS. Chaque .skel-bone porte un pseudo-élément ::after en inset: 0 qui remplit l'os. Ce pseudo-élément a pour fond un dégradé linéaire horizontal : transparent → rg​ba(255,255,255,.1) au pic à 50 % → transparent, taille 200% 100% — soit deux fois la largeur de l'os. @keyframes shimmerSlide anime background-position de -200% 0 à 200% 0 : le dégradé, deux fois plus large que l'os, parcourt une plage de 400 % par cycle. La raie lumineuse (pic à 10 % d'opacité) traverse l'os une fois par cycle, de la gauche hors-cadre vers la droite hors-cadre. L'animation est déclarée explicitement : 1.8s ease-in-out 0s infinite normal none running shimmerSlide. Aucun décalage (animation-delay: 0s) : les 16 lueurs défilent en phase, comme un seul champ qui balaie l'interface.

Aucun JavaScript. Le CSS ne fait appel à aucune variable var(--…) du design system du site — aucune dépendance externe, aucune valeur transparente par manque de déclaration. Le HTML vendu inclut .demo-preview, le conteneur de centrage du site (display: flex ; min-height: 300px ; background: #0a0a0f), qui n'est pas nécessaire au fonctionnement : .dash-skel s'intègre directement dans n'importe quel gabarit. La classe .skel-bone-circle est définie dans le CSS (border-radius 50 %) mais absente du HTML vendu — elle est disponible si l'acheteur souhaite ajouter un avatar rond.

Accessibilité

  • prefers-reduced-motion absent du code : l'animation shimmerSlide tourne en continu quelle que soit la préférence système (mesuré sous contexte reduce Playwright : animationName “ shimmerSlide”, animationDuration “1.8s”). Ajoutez @media (prefers-reduced-motion: reduce) { .skel-bone::after, .skel-bone-circle::after { animation: none; } } — le fond gris rgba(255,255,255,.08) reste visible comme repère de chargement statique.
  • Aucun rôle ARIA ni texte alternatif : ni role="status", ni aria-busy, ni aria-live, ni libellé accessible. Pour les lecteurs d'écran, enveloppez .dash-skel dans <div role="status" aria-label="Chargement du tableau de bord…"> ; retirez l'élément entier du DOM quand le contenu réel apparaît.
  • Fond des os sur fond clair : rgba(255,255,255,.08) sur fond blanc mesure < 1 % de différence — les barres sont invisibles. Sur un thème clair, remplacez par rgba(0,0,0,.08) dans .skel-bone et adaptez la couleur de pic du dégradé ::after en rgba(0,0,0,.1).
  • Cycle de vie : les 16 div sont vides et muets, l'arbre d'accessibilité n'est jamais modifié par le code vendu. Prévoyez de retirer ou masquer .dash-skel une fois les données reçues — laisser un skeleton visible indéfiniment est une fausse information pour les utilisateurs de technologies d'assistance.

Compatibilité navigateur

CSS pur : @keyframes, pseudo-éléments ::after, animation, CSS Grid, inset. La propriété inset est la plus récente (Chrome 87, Firefox 87, Safari 14.1, Edge 87). Zéro dépendance.

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

Remplacez inset: 0 par top:0;right:0;bottom:0;left:0 dans .skel-bone::after pour remonter à Chrome 57 / Firefox 52 / Safari 10.1 (limite : CSS Grid). Sans CSS Grid (IE), les 3 cartes de stats s'empilent verticalement au lieu de s'aligner en colonnes.

Le code

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

index.html — structure 
<div class="dash-skel">
  <div class="dash-skel-stats">
    <div class="dash-skel-stat-card">
      <div class="skel-bone dash-skel-stat-label"></div>
      <div class="skel-bone dash-skel-stat-val"></div>
    </div>
    <!-- … 2 autres cartes identiques -->
  </div>
  <div class="skel-bone dash-skel-chart"></div>
  <div class="dash-skel-table">
    <div class="dash-skel-row">
      <div class="skel-bone dash-skel-cell1"></div>
      <div class="skel-bone dash-skel-cell2"></div>
      <div class="skel-bone dash-skel-cell3"></div>
    </div>
    <!-- … 2 autres lignes (largeurs variables en style="width:…") -->
  </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
Nombre de cartes de stats — HTML : 3 .dash-skel-stat-card 3 Retirer ou dupliquer un .dash-skel-stat-card ; la grille grid-template-columns: 1fr 1fr 1fr s'adapte automatiquement (modifier la valeur en 1fr 1fr pour 2 cartes ou repeat(4, 1fr) pour 4).
Hauteur de la zone graphique — CSS : .dash-skel-chart { height: 80px } 80 px 80 px par défaut ; porter à 120px pour un graphe temps réel, descendre à 40px pour un sparkline, ou supprimer l'élément entièrement si votre interface n'a pas de graphe.
Largeurs des colonnes — CSS : .dash-skel-cell1 30 %, .dash-skel-cell2 45 %, .dash-skel-cell3 20 % 30 % / 45 % / 20 % Aligner ces pourcentages sur les vraies colonnes du tableau cible : les largeurs par défaut et les surcharges style="width:…" sur les lignes 2 et 3 simulent déjà une variabilité de longueur ; adaptez-les à votre contenu réel.
Nombre de lignes de tableau — HTML : 3 .dash-skel-row 3 Ajouter ou retirer des .dash-skel-row dans .dash-skel-table ; chaque ligne contient 3 cellules. Pour adapter les largeurs de chaque nouvelle ligne, surcharger en style="width:…" sur chaque .skel-bone.
Durée du shimmer — CSS : animation: 1.8s ease-in-out 0s infinite… 1,8 s 1s pour un chargement rapide, 3s pour simuler un contenu lourd ; modifier la première valeur de la déclaration animation sur .skel-bone::after.
Intensité du shimmer — CSS : rgba(255,255,255,.1) au pic du dégradé .1 (10 % d'opacité) Porter à .18 pour un éclat plus marqué ; descendre à .06 pour un effet très discret. Sur fond clair, remplacer par rgba(0,0,0,.1) conjointement avec le fond des os.
Fond des os — CSS : .skel-bone { background: rgba(255,255,255,.08) } rgba(255,255,255,.08) Base grise des barres ; sur fond clair, remplacer par rgba(0,0,0,.08). La classe .skel-bone-circle est définie dans le CSS (border-radius 50 %) mais absente du HTML — ajouter cette classe à un div vide pour un avatar rond.

FAQ

Card Skeleton simule une seule fiche produit — avatar rond, image, titre, lignes de texte — et compte 7 os. Dashboard Skeleton couvre trois zones de natures distinctes (KPI numériques, aire graphique, tableau) en 16 os. Les os de Card Skeleton sont taillés pour une cellule de liste ou de catalogue ; ceux de Dashboard Skeleton sont proportionnés pour une interface de reporting où la lecture est globale, de haut en bas, et non item par item.
Oui. Tous les ::after ont animation-delay: 0s : les 16 lueurs défilent en phase. C'est le comportement habituel pour un skeleton de tableau de bord — la lecture est globale. Pour un léger effet en cascade (les cartes s'allument l'une après l'autre), ajoutez des délais sur les pseudo-éléments : .dash-skel-stat-card:nth-child(2) .skel-bone::after { animation-delay: .15s } et :nth-child(3) à .3s.
Masquez ou retirez .dash-skel du DOM et affichez le contenu réel dans le même espace. Pour une transition douce : dashSkel.style.transition = 'opacity .3s' ; dashSkel.style.opacity = '0', puis retirez l'élément en fin de transition (transitionend). Le code vendu n'installe aucun écouteur d'événement — rien à nettoyer côté JS.