# Skeletons de carga animados con Tailwind CSS

> Crea skeletons de carga animados con Tailwind CSS usando un efecto shimmer, para mostrar una interfaz provisional mientras se carga el contenido real.

Por Shodipo Ayomide, publicado el 18 jul 2022. Versión web: https://blog.shodipoayomide.com/es/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>

# Skeleton

- Usa la variedad de clases utilitarias de Tailwind para crear un skeleton que se parezca a grandes rasgos al contenido que estás a punto de cargar.

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

# Superposición con degradado

- Usa los color stops de degradado de Tailwind para crear un degradado que pase de transparente a blanco y de vuelta a transparente.

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

# Animación

- Define una animación de keyframes en CSS que desplace los elementos un 100% hacia la derecha dentro del objeto extend keyframes de `tailwind.config.js`.
- Usa los valores arbitrarios de Tailwind para aplicar la animación de keyframes al elemento de superposición.

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

# Combina el skeleton y la animación de superposición

- Añade la superposición a un pseudo-elemento del contenedor del skeleton usando el modificador `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>

# Toques finales

- Oculta la superposición mientras está posicionada fuera del skeleton.
- Añade una sombra al skeleton.
- Añade un borde sutil en la parte superior de la superposición para simular el reflejo de la luz.
- Puedes corregir que Safari desborde la animación en las esquinas redondeadas con `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>