Carregador de esqueleto CSS Tailwind somente CSS para UI de espaço reservado. Formas de círculo, retângulo e linha de texto com animação de pulso. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Os componentes do esqueleto exibem layouts de espaço reservado enquanto o conteúdo é carregado, fornecendo feedback visual e melhorando o desempenho percebido. Construídas com HTML semântico e animações de pulso, as telas de esqueleto evitam mudanças de layout e definem as expectativas do usuário. O sistema de esqueleto Frutjam oferece suporte a vários formatos e tamanhos – ideal para visualização de conteúdo, carregamento progressivo e degradação elegante.
Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.
| Aula | Tipo | Descrição |
|---|---|---|
| skeleton | Base | Bloco de espaço reservado pulsante |
| skeleton-circle | Estilo | Forma de esqueleto circular |
| skeleton-text | Estilo | Animação Shimmer aplicada ao texto visível |
Uso Básico
<div class="skeleton h-32 w-32"></div> |
<div className="skeleton h-32 w-32"></div> |
Formas de esqueleto
1 2 3 4 5 6 7 | <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> |
Cartão Esqueleto
1 2 3 4 5 6 7 8 9 10 11 | <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> |
Lista de Esqueletos
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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> |
Esqueleto Avatar
1 2 3 | <div class="avatar"> <div class="skeleton skeleton-circle h-12 w-12"></div> </div> |
Cartão de perfil de esqueleto
1 2 3 4 5 6 7 8 9 10 | <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> |
Artigo Esqueleto
1 2 3 4 5 6 | <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> |
Texto Esqueleto
<span class="skeleton skeleton-text">AI is thinking...</span> |
Usando Claude Code, Cursor ou outro editor de IA?
Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Esqueleto e a estrutura sob demanda. Chega de aulas alucinadas.