# Squelettes de chargement animés avec Tailwind CSS

> Créez des squelettes de chargement animés avec Tailwind CSS grâce à un effet de scintillement, pour afficher une interface de substitution pendant que le vrai contenu se charge.

Par Shodipo Ayomide, publié le 18 juil. 2022. Version web : https://blog.shodipoayomide.com/fr/animated-loading-skeletons-with-tailwind

<div className="grid grid-cols-2 gap-6 sm:grid-cols-3">
  <div>
    
  </div>
  <div>
    
  </div>
  <div className="hidden sm:block">
    
  </div>
</div>

# Squelette

- Utilisez la panoplie de classes utilitaires de Tailwind pour créer un squelette qui ressemble à peu près au contenu que vous vous apprêtez à charger.

<div className="space-y-2">
  <div className="flex justify-center rounded-lg bg-rose-100/[1%] p-8 ring-1 ring-inset ring-rose-100/[3%]">
    <div className="w-[200px] space-y-5 rounded-2xl bg-white/5 p-4">
      <div className="h-24 rounded-lg bg-rose-100/10"></div>
      <div className="space-y-3">
        <div className="h-3 w-3/5 rounded-lg bg-rose-100/10"></div>
        <div className="h-3 w-4/5 rounded-lg bg-rose-100/20"></div>
        <div className="h-3 w-2/5 rounded-lg bg-rose-100/20"></div>
      </div>
    </div>
  </div>
  ```html
  <div class="space-y-5 rounded-2xl bg-white/5 p-4">
    <div class="h-24 rounded-lg bg-rose-100/10"></div>
    <div class="space-y-3">
      <div class="h-3 w-3/5 rounded-lg bg-rose-100/10"></div>
      <div class="h-3 w-4/5 rounded-lg bg-rose-100/20"></div>
      <div class="h-3 w-2/5 rounded-lg bg-rose-100/20"></div>
    </div>
  </div>
  ```
</div>

# Superposition en dégradé

- Utilisez les arrêts de couleur de dégradé de Tailwind pour créer un dégradé qui passe du transparent au blanc, puis revient au transparent.

<div className="space-y-2">
  <div className="flex justify-center rounded-lg bg-rose-100/[1%] p-8 ring-1 ring-inset ring-rose-100/[3%]">
    <div className="w-[200px]">
      <div className="h-48 bg-gradient-to-r from-transparent via-rose-100/20 to-transparent"></div>
    </div>
  </div>
  ```html
  <div
    class="
      [...]
      bg-gradient-to-r from-transparent via-rose-100/10 to-transparent"
  ></div>
  ```
</div>

# Animation

- Définissez une animation CSS par keyframes qui déplace les éléments de 100 % vers la droite, dans l'objet keyframes de la section extend de `tailwind.config.js`.
- Utilisez les valeurs arbitraires de Tailwind pour appliquer l'animation par keyframes à l'élément de superposition.

<div className="space-y-2">
  <div className="flex justify-center rounded-lg bg-rose-100/[1%] p-8 ring-1 ring-inset ring-rose-100/[3%]">
    <div className="w-[200px]">
      <div className="relative h-48 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-rose-100/20 to-transparent"></div>
    </div>
  </div>
  ```json
  {
    "keyframes": {
      "shimmer": {
        "100%": {
          "transform": "translateX(100%)",
        },
      },
    }
  },
  ```
  ```html
  <div class="[...] -translate-x-full animate-[shimmer_2s_infinite]"></div>
  ```
</div>

# Combiner le squelette et l'animation de superposition

- Ajoutez la superposition à un pseudo-élément du conteneur du squelette à l'aide du modificateur `before:` de Tailwind.

<div className="space-y-2">
  <div className="flex justify-center rounded-lg bg-rose-100/[1%] p-8 ring-1 ring-inset ring-rose-100/[3%]">
    <div className="w-[200px]">
      <div className="relative space-y-5 rounded-2xl bg-white/5 p-4 before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-rose-100/10 before:to-transparent">
        <div className="h-24 rounded-lg bg-rose-100/10"></div>
        <div className="space-y-3">
          <div className="h-3 w-3/5 rounded-lg bg-rose-100/10"></div>
          <div className="h-3 w-4/5 rounded-lg bg-rose-100/20"></div>
          <div className="h-3 w-2/5 rounded-lg bg-rose-100/20"></div>
        </div>
      </div>
    </div>
  </div>
  ```html
  <div
    class="
      [...]
      relative 
      before:absolute before:inset-0
      before:-translate-x-full
      before:animate-[shimmer_2s_infinite]
      before:bg-gradient-to-r
      before:from-transparent before:via-rose-100/10 before:to-transparent"
  >
    [...]
  </div>
  ```
</div>

# Touches finales

- Masquez la superposition tant qu'elle est positionnée en dehors du squelette.
- Ajoutez une ombre au squelette.
- Ajoutez une bordure subtile en haut de la superposition pour simuler un reflet de lumière.
- Vous pouvez corriger le débordement de l'animation sur les coins arrondis dans Safari avec `isolate`.

<div className="space-y-2">
  <div className="flex justify-center rounded-lg bg-rose-100/[1%] p-8 ring-1 ring-inset ring-rose-100/[3%]">
    <div className="w-[200px]">
      <div className="relative isolate space-y-5 overflow-hidden rounded-2xl bg-white/5 p-4 shadow-xl shadow-black/5 before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:border-t before:border-rose-100/10 before:bg-gradient-to-r before:from-transparent before:via-rose-100/10 before:to-transparent">
        <div className="h-24 rounded-lg bg-rose-100/10"></div>
        <div className="space-y-3">
          <div className="h-3 w-3/5 rounded-lg bg-rose-100/10"></div>
          <div className="h-3 w-4/5 rounded-lg bg-rose-100/20"></div>
          <div className="h-3 w-2/5 rounded-lg bg-rose-100/20"></div>
        </div>
      </div>
    </div>
  </div>
  ```html
  <div
    class="
      [...]
      isolate
      overflow-hidden
      shadow-xl shadow-black/5
      before:border-t before:border-rose-100/10"
  >
    [...]
  </div>
  ```
</div>