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

Article Skeleton

Dix os sur 290 px : hero 130 px, titre 85/60 %, corps 100→70 %, avatar 32 px avec nom et date d'auteur — shimmer CSS pur 1,8 s, zéro JavaScript.

CSSShimmerBlog

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

Article en attente d'un fetch — colonne de lecture — Article Skeleton exemple 1

① Article en attente d'un fetch — colonne de lecture

QuandLa page reçoit un slug, déclenche un appel API JSON et affiche le squelette pendant la latence réseau (50 à 500 ms selon le cache).
PourquoiHero + titre deux lignes + corps + auteur : la structure correspond exactement à un article de blog standard. Le lecteur identifie le type de contenu qui arrive sans que le développeur adapte quoi que ce soit.
RéglagesAucun réglage — l'effet est livré à la bonne dimension pour une colonne 290 px. Pour une mise en page pleine largeur : .article-skel { width: 100%; max-width: 680px; } et .article-skel-hero { height: 200px; }.
Documentation technique — le chapitre demandé se charge, sommaire déjà en place — Article Skeleton exemple 2

② Documentation technique — le chapitre demandé se charge, sommaire déjà en place

QuandLe lecteur clique un chapitre dans le sommaire de gauche, déjà rendu avec la navigation du site ; la page récupère le contenu du chapitre (Markdown compilé côté serveur, 100 à 400 ms) et le squelette occupe la colonne de lecture pendant ce délai, sommaire et recherche restant utilisables.
PourquoiUn chapitre de documentation a exactement l'anatomie des dix os : un schéma d'en-tête (hero 130 px), un titre sur deux lignes (85 puis 60 %), des paragraphes qui s'effilent (100 → 70 %), puis le rédacteur et la date de mise à jour. Le squelette réserve la surface exacte du chapitre dans la colonne : le sommaire ne bouge pas quand le contenu arrive, et le lecteur sait qu'il attend de la prose illustrée — un spinner ne réserverait aucune hauteur, une barre de progression ne dirait pas ce qui arrive, et Card Skeleton (avatar en tête) annoncerait un post, pas un chapitre.
RéglagesRéglage de la fiche pour une colonne de lecture : .article-skel { width: 100%; max-width: 680px; } — les os exprimés en % (hero, titres, lignes de corps) suivent la largeur, le hero garde ses 130px pour le schéma d'en-tête, durée de 1.8s inchangée. Posez aria-busy="true" sur la colonne de contenu seulement, jamais sur le sommaire, qui doit rester navigable.
Flux d'agrégateur — plusieurs articles en chargement parallèle — Article Skeleton exemple 3

③ Flux d'agrégateur — plusieurs articles en chargement parallèle

QuandUne liste de résultats ou un fil RSS charge plusieurs entrées en parallèle via Promise.all ; chaque carte affiche son squelette jusqu'à la résolution de son appel.
PourquoiEmpiler plusieurs .article-skel donne un flux crédible en attente — plus informatif qu'un spinner global pour un utilisateur qui sait que des articles arrivent. La hauteur de 359 px permet d'aligner 2 à 3 cartes en écran.
RéglagesHéro ramené à 80px pour une liste compacte (.article-skel-hero { height: 80px; }) ; supprimer .article-skel-title2 pour simuler des titres courts ; 2 lignes de corps suffisent pour une liste.

Comment ça marche

La carte .article-skel (290 px de large, padding: 16px, border-radius: 16px, fond rgba(255,255,255,.02), bordure rgba(255,255,255,.05)) regroupe dix os en colonne. L'image hero .article-skel-hero occupe toute la largeur du contenu (256 × 130 px, border-radius: 10px, margin-bottom: 16px), suivie de deux lignes de titre : .article-skel-title à 85 % (218 px, 16 px de hauteur, margin-bottom: 8px) et .article-skel-title2 à 60 % (154 px, margin-bottom: 16px). Viennent ensuite quatre .article-skel-p de 9 px de hauteur dont les largeurs sont fixées par leur position dans le parent via :nth-child : premier enfant en position 4 à 100 % (256 px), 5 à 95 % (243 px), 6 à 88 % (225 px), 7 à 70 % (179 px) — une pyramide inversée qui reproduit visuellement l'étalement d'un paragraphe de prose. Le dernier reçoit un margin-bottom: 16px, les trois autres 8px. Hauteur totale de la carte mesurée : 359 px.

L'animation repose sur le pseudo-élément ::after commun à .skel-bone et .skel-bone-circle. Il est positionné en absolute avec inset: 0 et porte un linear-gradient(90deg, transparent 0, rgba(255,255,255,.1) 50%, transparent 100%) de taille 200% 100%. L'animation shimmerSlide déplace le background-position de −200% 0 à 200% 0, soit un déplacement de 400 %. Sur un os de 256 px, le reflet traverse l'élément en environ 25 % de la durée totale — 0,45 s de balayage visible, puis 1,35 s de surface unie — pour une durée de 1,8 s (ease-in-out, délai 0s, infini). La crête vaut rgba(255,255,255,.1) sur la base rgba(255,255,255,.08) : un reflet intentionnellement discret. Tous les os partagent les mêmes paramètres et shimment en phase.

En bas de la carte, .article-skel-author (flex, gap: 10px, padding-top: 14px, border-top: 1px solid rgba(255,255,255,.05)) aligne un cercle .skel-bone-circle.article-skel-author-avatar de 32 × 32 px avec, à droite, deux lignes empilées : nom (80 × 10 px) et date (60 × 8 px, margin-top: 6px). La hiérarchie des largeurs (80 puis 60 px) imite une ligne prénom·nom suivie d'une date courte. Avertissement d'intégration : les largeurs des quatre lignes de corps reposent sur :nth-child(5/6/7) de .article-skel — si un élément est inséré avant ces lignes, les positions sont décalées et les largeurs ne s'appliquent plus aux bons os. Le conteneur .demo-preview présent dans le code vendu (fond #0a0a0f, flex centré, min-height: 300px) est la démo du site ; l'effet commence à .article-skel.

Accessibilité

  • prefers-reduced-motion absent : aucune règle @media (prefers-reduced-motion: reduce) dans le CSS vendu — mesuré sous émulation Playwright, animationPlayState reste running quelle que soit la préférence. Ajoutez @media (prefers-reduced-motion: reduce) { .skel-bone::after, .skel-bone-circle::after { animation: none; } } pour immobiliser le shimmer chez les utilisateurs concernés.
  • Aucun attribut d'accessibilité : pas de role="status", pas d'aria-busy, pas d'aria-live. Les lecteurs d'écran voient dix div vides sans contexte. Pour un état de chargement : posez aria-busy="true" sur le conteneur parent pendant le fetch, aria-live="polite" pour annoncer l'arrivée du contenu réel, et retirez ou remplacez .article-skel dès que les données sont disponibles.
  • Nœuds fantômes : les dix os sont des éléments vides sans texte ni label. Posez aria-hidden="true" sur .article-skel pour les masquer de l'arbre d'accessibilité et éviter dix arrêts de navigation au clavier.
  • Contraste délibérément bas : la base des os (rgba(255,255,255,.08) sur #0a0a0f) donne environ 1,5:1 — volontairement discret. Aucune information n'est encodée dans la couleur ; le squelette est structurel et décoratif. Le seuil WCAG 1.4.11 (composants d'interface) ne s'applique pas à un placeholder de chargement. Sur fond clair, ajustez la base à rgba(0,0,0,.08).

Compatibilité navigateur

La propriété raccourcie inset: 0 sur le pseudo-élément ::after est le plancher technique : Chrome 87, Firefox 87, Safari 14.1, Edge 87 (2020). Le reste — @keyframes, background-size, linear-gradient, border-radius, display: flex — est disponible depuis 2013. Zéro dépendance, zéro JavaScript.

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

Sans inset (antérieur à 2020), le ::after se réduit à 0 × 0 px et le shimmer disparaît. Les os restent visibles comme blocs rgba(255,255,255,.08) sans animation — un placeholder de chargement reconnaissable, statique.

Le code

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

index.html — structure 
<div class="article-skel">
  <div class="skel-bone article-skel-hero"></div>
  <div class="skel-bone article-skel-title"></div>
  <div class="skel-bone article-skel-title2"></div>
  <div class="skel-bone article-skel-p"></div>
  <!-- … 4 au total -->
  <div class="article-skel-author">
    <div class="skel-bone-circle article-skel-author-avatar"></div>
    <div>
      <div class="skel-bone article-skel-author-name"></div>
      <div class="skel-bone article-skel-author-date"></div>
    </div>
  </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
Largeur de la carte (CSS — .article-skel { width: 290px }) 290 px Les os exprimés en % (article-skel-hero, titres, lignes de corps) s'adaptent automatiquement. Pour une colonne éditoriale, width: 100%; max-width: 680px avec une hauteur de corps explicite.
Hauteur de l'image hero (CSS — .article-skel-hero { height: 130px }) 130 px Surface visuellement dominante. 80px pour une liste compacte, 200px pour un hero magazine, 0 (ou display: none) pour un article sans image.
Durée du shimmer (CSS — animation: 1.8s ease-in-out 0s infinite shimmerSlide) 1,8 s S'applique à tous les os simultanément (délai 0 s). 1.2s pour un chargement perçu comme rapide ; 2.5s pour une ambiance calme. Pour décaler les os : .article-skel-title::after { animation-delay: .15s; } (cibler le ::after, pas l'os lui-même).
Intensité du shimmer (CSS — rgba(255,255,255,.1) dans le dégradé du ::after) .1 Opacité de crête du reflet. .15 à .2 pour un effet plus marqué sur fond sombre ; .05 pour l'effacer presque. La base des os est à .08 — ne pas dépasser .3 pour rester dans les codes d'un skeleton.
Arrondi des os (CSS — .skel-bone { border-radius: 6px }) 6 px 3px pour un design strict ; 12px pour une application mobile arrondie. Le hero a son propre arrondi (.article-skel-hero { border-radius: 10px }) à ajuster séparément.
Largeurs des titres (CSS — .article-skel-title { width: 85% } et .article-skel-title2 { width: 60% }) 85 % et 60 % Simulent un titre à deux niveaux ou un titre long suivi d'un sous-titre. Passer à 90/75 pour un titre plus long ; supprimer .article-skel-title2 pour un titre monoligne.
Hauteur des lignes de corps (CSS — .article-skel-p { height: 9px }) 9 px Correspond à environ la moitié de la hauteur de ligne d'un corps 16 px (mi-hauteur de jambage). 11px pour un contenu plus dense ; 7px pour un texte secondaire petit.

FAQ

Card Skeleton place l'avatar en en-tête (auteur avant l'image, style post de réseau social : avatar + nom, puis image, puis trois lignes de corps). Article Skeleton commence par l'image hero (130 px, pleine largeur), enchaîne avec deux lignes de titre et quatre lignes de corps qui s'effilent, et réserve l'auteur pour la fin — le schéma d'un article de blog en mode lecture. Ce n'est pas qu'une différence d'ordre : la hauteur du hero et les largeurs décroissantes des lignes de corps traduisent une structure éditoriale, pas une carte de contenu social.
Oui, mais avec précaution. Les règles .article-skel-p:nth-child(5/6/7) ciblent les enfants 5, 6 et 7 de .article-skel — pas les 2, 3, 4e paragraphes. Si un élément est inséré avant les lignes de corps dans la carte (par exemple un sous-titre supplémentaire), les positions se décalent et les largeurs s'appliquent aux mauvais os. Pour une structure modifiée, remplacez les sélecteurs :nth-child par des classes distinctes (.article-skel-p--95, etc.) ou des styles inline.
Non. .demo-preview (fond #0a0a0f, flex centré, min-height: 300px) est le cadre de démonstration du site Effect.Labs — il n'est pas requis pour que le skeleton fonctionne. Les deux premiers blocs CSS du code vendu (.demo-preview, .demo-preview *… et .demo-preview {…}) peuvent être supprimés à l'intégration. L'effet commence à .article-skel et ses classes associées.