Générateur de skeleton loading (CSS)

Générateur de skeleton loading (CSS): à quoi ça sert

Le skeleton screen est le squelette gris qui apparaît à la place du contenu pendant son chargement, comme sur Facebook et YouTube. Il montre la forme de ce qui va arriver, rend l’attente plus courte et évite que la page saute à l’apparition du contenu.

Choisissez le modèle (carte avec image, liste avec avatar, profil ou paragraphe), le nombre de répétitions, les couleurs et les coins. Le reflet animé ne déplace que le fond et est désactivé pour qui a demandé moins de mouvement, et le bloc utilise aria-busy avec un texte de chargement pour les lecteurs d’écran.

Mode d’emploi

1. Choisissez le modèle et le nombre de répétitions.
2. Réglez les couleurs, les coins et le reflet.
3. Copiez le code et remplacez-le par le contenu à son arrivée.

Quand l’utiliser

• Liste de produits chargée par API.
• Fil d’actualité ou liste de commentaires.
• Tableaux de bord et systèmes web.

Questions fréquentes

Pourquoi un skeleton plutôt qu’une icône de chargement ?

Le squelette montre la forme de ce qui va apparaître : la page ne saute donc pas à l’arrivée du contenu et l’attente paraît plus courte. Il fonctionne mieux pour les cartes, les listes et les profils ; pour des actions rapides, comme envoyer un formulaire, un indicateur sur le bouton lui-même suffit.

Qu’en est-il pour les utilisateurs de lecteur d’écran ?

Le bloc reçoit aria-busy=true et un texte masqué « Chargement » ; les rectangles sont décoratifs (aria-hidden). Quand le contenu arrive, remplacez le squelette par le contenu et retirez aria-busy.

Le reflet animé est-il lourd ?

Non : l’animation ne déplace que le fond de chaque rectangle. Pour les personnes dont le système est réglé pour réduire les mouvements, le reflet est désactivé et seule la couleur reste.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires