Chargeur de squelette Tailwind CSS uniquement CSS pour l'interface utilisateur d'espace réservé. Formes de cercles, de rectangles et de lignes de texte avec animation par impulsions. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Les composants squelettes affichent des dispositions d'espace réservé pendant le chargement du contenu, fournissant un retour visuel et améliorant les performances perçues. Construits avec du HTML sémantique et des animations pulsées, les écrans squelettes empêchent les changements de mise en page et définissent les attentes des utilisateurs. Le système de squelette Frutjam prend en charge plusieurs formes et tailles, idéal pour la prévisualisation du contenu, le chargement progressif et la dégradation gracieuse.
CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
| Classe | Taper | Description |
|---|---|---|
| skeleton | Base | Bloc d'espace réservé pulsé |
| skeleton-circle | Style | Forme de squelette circulaire |
| skeleton-text | Style | Animation chatoyante appliquée au texte visible |
Utilisation de base
<div class="skeleton h-32 w-32"></div> |
<div className="skeleton h-32 w-32"></div> |
Formes de squelette
1 2 3 4 5 6 7 | <div class="skeleton skeleton-circle h-12 w-12"></div> <div class="skeleton h-12 w-12"></div> <div class="skeleton h-12 w-12"></div> <div class="skeleton h-4 w-12"></div> |
Carte Squelette
1 2 3 4 5 6 7 8 9 10 11 | <div class="card card-outline w-96"> <figure class="skeleton h-64"></figure> <div class="card-content"> <h2 class="skeleton h-4 w-28"></h2> <p class="skeleton h-3 w-full"></p> <p class="skeleton h-3 w-full"></p> <div class="card-actions justify-end"> <div class="skeleton h-8 w-24"></div> </div> </div> </div> |
Liste des squelettes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div class="space-y-2"> <div class="flex items-center gap-3"> <div class="skeleton h-10 w-10 rounded-full shrink-0"></div> <div class="flex flex-col gap-2 flex-1"> <div class="skeleton h-3 w-20"></div> <div class="skeleton h-3 w-full"></div> </div> </div> <div class="flex items-center gap-3"> <div class="skeleton h-10 w-10 rounded-full shrink-0"></div> <div class="flex flex-col gap-2 flex-1"> <div class="skeleton h-3 w-20"></div> <div class="skeleton h-3 w-full"></div> </div> </div> </div> |
Avatar Squelette
1 2 3 | <div class="avatar"> <div class="skeleton skeleton-circle h-12 w-12"></div> </div> |
Skeleton Profile Card
1 2 3 4 5 6 7 8 9 10 | <div class="flex w-52 flex-col gap-4"> <div class="flex items-center gap-4"> <div class="skeleton h-16 w-16 shrink-0 rounded-full"></div> <div class="flex flex-col gap-4"> <div class="skeleton h-4 w-20"></div> <div class="skeleton h-4 w-28"></div> </div> </div> <div class="skeleton h-32 w-full"></div> </div> |
Skeleton Article
1 2 3 4 5 6 | <div class="flex w-52 flex-col gap-4"> <div class="skeleton h-32 w-full"></div> <div class="skeleton h-4 w-28"></div> <div class="skeleton h-4 w-full"></div> <div class="skeleton h-4 w-full"></div> </div> |
Skeleton Text
<span class="skeleton skeleton-text">AI is thinking...</span> |
Vous utilisez Claude Code, Cursor ou un autre éditeur d'IA ?
Cherry MCP donne à votre éditeur d'IA les noms et la structure exacts des classes Squelette sur demande. Fini les cours hallucinés.