# Skeletons de carregamento animados com Tailwind CSS

> Crie skeletons de carregamento animados com Tailwind CSS usando um efeito shimmer, para mostrar uma UI de placeholder enquanto o conteúdo real carrega.

Por Shodipo Ayomide, publicado em 18 de jul. de 2022. Versão web: https://blog.shodipoayomide.com/pt/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>

# O skeleton

- Use a variedade de classes utilitárias do Tailwind para criar um skeleton que se pareça, de forma aproximada, com o conteúdo que você está prestes a carregar.

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

# Overlay com gradiente

- Use os color stops de gradiente do Tailwind para criar um gradiente que vai de transparente para branco e volta para 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>

# Animação

- Defina uma animação CSS com keyframes que desloca os elementos 100% para a direita no objeto de keyframes do extend em `tailwind.config.js`.
- Use os valores arbitrários do Tailwind para aplicar a animação de keyframes ao elemento de overlay.

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

# Combine o skeleton e a animação do overlay

- Adicione o overlay a um pseudo-elemento do wrapper do skeleton usando o modificador `before:` do 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 finais

- Esconda o overlay enquanto ele estiver posicionado fora do skeleton.
- Adicione uma sombra ao skeleton.
- Adicione uma borda sutil no topo do overlay para simular o reflexo da luz.
- Você pode corrigir o Safari, que deixa a animação vazar nos cantos arredondados, com `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>