Skeleton Screen
Trois lignes de 16 px (60/100/80 %) animées par un shimmer sombre en 1,5 s — skeleton de texte minimal, synchrone, zéro 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 squelette repose sur deux classes. .loader-skeleton est une colonne flex de 200 px de large avec gap: 12px ; elle contient trois .skeleton-line, chacune haute de 16 px et arrondie à 4 px. Les largeurs sont posées directement en CSS : la première ligne vaut 60 % (120 px), la deuxième 100 % (200 px), la troisième 80 % (160 px) — un profil décroissant-montant qui mime la longueur variable d'un texte. La hauteur totale du bloc mesuré est de 72 px (3 × 16 px + 2 × 12 px de gap).
L'unique @keyframes shimmer déplace background-position de 200% 0 à -200% 0, ce qui fait traverser le pic du dégradé de droite à gauche sur 400 % de la largeur. Le dégradé — linear-gradient(90deg, #1a1a24 25%, #2a2a34 50%, #1a1a24 75%) avec background-size: 200% 100% — emploie deux tons sombres : le fond à rgb(26, 26, 36) et le pic à rgb(42, 42, 52), soit un écart de 16 sur chaque canal RVB. La durée est de 1,5 s, courbe ease, sans délai sur aucune des trois lignes : les trois shimment en phase. Mesuré sous Chromium, la position passe de ~80 % à ~-134 % en 500 ms, soit ~270 % par seconde.
Deux limites à connaître avant d'intégrer. Premièrement, le code ne contient aucune règle @media (prefers-reduced-motion: reduce) : mesuré sous Playwright avec l'émulation de la préférence, l'animation tourne à la même vitesse — il faut l'arrêter manuellement (voir Accessibilité). Deuxièmement, le HTML vendu englobe le squelette dans un .demo-preview — conteneur du site avec background: #0a0a0f et min-height: 300px — qui n'est pas nécessaire pour l'effet lui-même : la structure utile est uniquement le .loader-skeleton et ses trois enfants (voir Structure HTML).
Accessibilité
- prefers-reduced-motion absent : aucune règle
@media (prefers-reduced-motion: reduce)dans le CSS vendu — mesuré, l'animation tourne à 1,5 s quelle que soit la préférence. Ajoutez@media (prefers-reduced-motion: reduce) { .skeleton-line { animation: none } }pour immobiliser le shimmer chez les utilisateurs concernés. - Rôle sémantique manquant : posez
role="status"etaria-label="Chargement en cours"sur le.loader-skeleton(ou sur l'élément parent qui prend le relais), afin que les lecteurs d'écran annoncent l'état de chargement sans lire les troisdivvides. - Texte alternatif : les trois
.skeleton-linesont des éléments graphiques vides. Ajoutezaria-hidden="true"sur chacun ; le texte annoncé à l'arbre d'accessibilité doit venir durole="status"parent, pas des enfants. - Retrait du DOM :
.loader-skeletondoit être supprimé ou masqué (display: none) dès que le contenu réel est inséré, sinon les assistants techniques continuent d'annoncer un chargement pour un contenu déjà disponible.
Compatibilité navigateur
CSS pur — @keyframes, linear-gradient, background-size, animation : propriétés disponibles dans tous les navigateurs courants sans préfixe depuis 2013. Zéro dépendance.
Sans animations CSS (navigateur très ancien), les trois lignes s'affichent comme des blocs gris sombres uniformes sans mouvement — la mise en page du skeleton reste intacte, seul le shimmer disparaît.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="loader-skeleton">
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
</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 |
|---|---|---|
Largeur du bloc (CSS — .loader-skeleton { width }) |
200px | Largeur totale du skeleton ; les pourcentages des lignes s'y rapportent. 100% pour remplir le conteneur parent ; une valeur fixe pour verrouiller la mise en page. |
Espacement entre lignes (CSS — .loader-skeleton { gap }) |
12px | Distance verticale entre chaque ligne. 8px pour une liste dense ; 20px pour imiter l'interlignage d'un texte plus aéré. |
Hauteur des lignes (CSS — .skeleton-line { height }) |
16px | Épaisseur de chaque barre. Calquer sur la taille de police du contenu qu'elle remplace : 14px pour un corps de texte, 24px pour un titre. |
Rayon des coins (CSS — .skeleton-line { border-radius }) |
4px | 0 pour des barres rectangulaires (style tabulaire) ; 8px pour un rendu plus doux ; 9999px pour des pilules. |
Vitesse du shimmer (CSS — animation-duration: 1.5s) |
1.5s | Durée d'un cycle complet. 2s : plus lent, moins distrayant ; 0.8s : haché, à éviter sur de longues attentes. |
Couleurs du dégradé (CSS — #1a1a24 / #2a2a34) |
gris très sombre, delta de 16/256 par canal | Sur fond clair, remplacez par rgba(0,0,0,.06) / rgba(0,0,0,.14) pour un shimmer semi-transparent adaptatif. Sur fond de couleur, utilisez deux teintes adjacentes dans la même palette. |
Largeurs des lignes (CSS — :nth-child(1/2/3) { width }) |
60 % / 100 % / 80 % | Profil des lignes. 100% / 90% / 60% pour un paragraphe qui se rétrécit ; 30% / 100% / 100% pour simuler une étiquette suivie de deux lignes de données. |
FAQ
#1a1a24 → #2a2a34). fx-0470 structure un bloc éditorial avec hiérarchie titre/corps ; fx-0428 représente une rangée de lignes de même importance — liste de données, messages, champs de formulaire.animation-delay n'est posé sur les lignes — toutes démarrent à 0s. La synchronie est volontaire : le bloc forme une unité visuelle unique plutôt qu'une cascade perceptible. Pour ajouter un stagger, posez .skeleton-line:nth-child(1) { animation-delay: 0s }, .skeleton-line:nth-child(2) { animation-delay: .15s }, .skeleton-line:nth-child(3) { animation-delay: .3s }.#1a1a24 = gris très sombre) s'affichent bien sur fond blanc, mais le shimmer lui-même (écart de 16/256 entre les deux tons) peut paraître peu perceptible. Pour un fond clair, remplacez le dégradé par linear-gradient(90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.14) 50%, rgba(0,0,0,.06) 75%) : le delta relatif reste identique mais s'adapte à n'importe quelle teinte de fond.
