Skeleton Generator
Crie telas de carregamento skeleton CSS com animações shimmer e pulse. Escolha um preset e copie HTML + CSS.
① Escolha um preset de layout ② Escolha animação e cores ③ Copie o CSS e o HTML
#2A2A2A
#3A3A3A
/* CSS */
.sk-bone {
background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
background-size: 200% 100%; animation: sk-shimmer 1.5s infinite;
border-radius: 4px;
}
.sk-img { width: 100%; height: 180px; border-radius: 8px; margin-bottom: 16px; }
.sk-line { height: 14px; margin-bottom: 10px; }
.sk-content { padding: 4px 0; }
.sk-card { max-width: 320px; }
.sk-list { display: flex; flex-direction: column; gap: 16px; }
.sk-list-item { display: flex; align-items: center; gap: 12px; }
.sk-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.sk-lines { flex: 1; }
.sk-article { max-width: 560px; }
.sk-profile { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 240px; }
.sk-circle { width: 72px; height: 72px; border-radius: 50%; }
.sk-profile-info { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: center; }
@keyframes sk-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes sk-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.8; }
}
/* HTML */
<div class="sk-card">
<div class="sk-img sk-bone"></div>
<div class="sk-content">
<div class="sk-line sk-bone" style="width:60%"></div>
<div class="sk-line sk-bone" style="width:90%"></div>
<div class="sk-line sk-bone" style="width:75%"></div>
</div>
</div>O que são telas skeleton e por que usá-las?
As telas skeleton são espaços reservados de UI que imitam a estrutura do conteúdo enquanto carrega. Melhoram significativamente o desempenho percebido. A animação shimmer aplica um gradiente móvel via background-position. Pulse usa uma animação de opacity para criar um efeito de respiração. A técnica chave é uma classe .sk-bone combinada com border-radius.
Perguntas frequentes
Uma tela skeleton é um espaço reservado de UI que replica o layout do conteúdo real antes de ser carregado, usando formas simplificadas em cores suaves.
O efeito shimmer aplica um gradiente linear e anima background-position de -200% a 200% horizontalmente, criando a ilusão de luz varrendo o elemento.
Shimmer é mais sofisticado e comunica carregamento ativo. Pulse é mais simples e funciona melhor com layouts complexos ou temas escuros.
Copie a estrutura HTML gerada e substitua cada div .sk-bone pelos seus elementos de conteúdo reais.
A abordagem padrão é renderizar condicionalmente o skeleton ou o conteúdo real com base numa variável de estado de carregamento.
Sim. Aplique sk-shimmer ou sk-pulse seletivamente a ossos específicos para variedade visual.
Sim, são particularmente eficazes em dispositivos móveis onde a latência de rede é maior.