Gerador de Skeleton CSS Loader

Skeleton screens: performance percebida acima da velocidade real

Um skeleton loader (ou skeleton screen) é um placeholder de baixa fidelidade que reproduz o layout do conteúdo final enquanto os dados reais ainda carregam. Popularizado pelo Facebook por volta de 2014 e rapidamente adotado por LinkedIn, YouTube, Slack e Medium, a técnica troca o spinner genérico por um wireframe cinza da página que está prestes a aparecer. O usuário entende imediatamente a estrutura — "vai ter um avatar aqui, três linhas de texto, uma imagem embaixo" — e a espera parece mais curta mesmo que o tempo real de carregamento não tenha mudado. É o ganho clássico de performance percebida: você não tornou a página mais rápida, tornou a espera produtiva.

.skeleton {
  background: linear-gradient(90deg,
    #eee 0%, #f5f5f5 50%, #eee 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

Há um segundo ganho menos óbvio: skeleton screens reduzem o Cumulative Layout Shift (CLS), uma das Core Web Vitals do Google. Quando você reserva o retângulo exato que o avatar, o título e o corpo de texto vão ocupar, o conteúdo entra no lugar sem empurrar nada para o lado e o CLS fica próximo de zero. Spinners fazem o oposto — a página colapsa para um ícone minúsculo e depois reexpande quando os dados chegam, muitas vezes deslocando conteúdo sob o dedo do usuário no exato instante em que ele toca.

Pulse, shimmer ou wave?

• Pulse — opacity oscila entre aproximadamente 0,5 e 1. Barato, calmo, padrão do Tailwind via animate-pulse.
• Shimmer — uma faixa clara desliza sobre um fundo mais escuro. O visual do Facebook; lê-se como "carregando" sem palavra.
• Wave — um gradiente suave caminha em uma direção, menos agressivo que o shimmer. Padrão do Material UI.

Quando usar (e quando não usar) skeleton

Skeletons brilham quando o layout é previsível: feed de cards, página de perfil, listagem de produtos. Também ajudam em redes móveis lentas ou instáveis, onde cada frame de frustração economizado é um usuário a mais. Evite-os quando a estrutura é imprevisível (resultados de busca que podem vir vazios, dashboards dinâmicos), dentro de formulários (use input com disabled) ou em botões (um spinner inline comunica melhor). O ponto ideal está entre 200 ms e 3 s: abaixo de 200 ms o conteúdo aparece antes do skeleton renderizar, acima de 5 s o usuário espera um status mais informativo — tempo estimado, contador de etapas ou mensagem explícita.

Acessibilidade

Envolva o container do skeleton com aria-busy="true" e aria-live="polite" para que leitores de tela anunciem a espera sem spammar. Respeite @media (prefers-reduced-motion: reduce) pausando o shimmer (mantenha os blocos cinzas, remova a animação) — o gradiente em movimento pode ser desconfortável para usuários com distúrbios vestibulares. Deixe a cor do placeholder ciente do tema com CSS custom properties para adaptar ao dark mode sem precisar de uma segunda folha de estilos.

Perguntas frequentes

Devo construir skeletons com SVG ou divs? Divs e CSS são mais fáceis de escrever, manter e tematizar. Bibliotecas baseadas em SVG como react-content-loader são úteis quando se quer um único asset que escala perfeitamente em todos os breakpoints ou quando o formato do placeholder é realmente irregular.

Como manter o skeleton sincronizado com o layout real? Escreva o skeleton dentro do mesmo componente da view carregada, alternando por uma flag loading. Compartilhar classes CSS (paddings, colunas de grid) garante que as dimensões batam e o CLS fique em zero.

Skeleton deixa a página mais rápida de verdade? Não — os dados continuam levando o mesmo tempo. O que muda é a percepção de velocidade e a tolerância do usuário à espera. O ganho é psicológico, não técnico.

Existe limite máximo de tempo de espera? Sim. Acima de 3 a 5 s, um skeleton estático começa a parecer quebrado — o usuário se pergunta se a página travou. Substitua por uma mensagem de progresso, um ETA ou opção de tentar novamente.