---
title: "Skeleton"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "CSS-only Tailwind CSS Skeleton with animated placeholders. Text, avatar, card, and image shapes for smooth perceived performance and loading states."
url: https://frutjam.com/fr/components/skeleton
---

# Skeleton Component

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

## Formes de squelette

```html
<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

```html
<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

```html
<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

```html
<div class="avatar">
  <div class="skeleton skeleton-circle h-12 w-12"></div>
</div>
```

## Skeleton Profile Card

```html
<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

```html
<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

```html
<span class="skeleton skeleton-text">AI is thinking...</span>
```