English
EspañolGerador de skeleton loading (CSS)
Escolha o modelo e as cores. O skeleton imita o formato do conteúdo que vai chegar, o que faz a espera parecer menor do que um ícone girando.
Esqueleto enquanto a página carrega
Disponível em: 
Gerador de skeleton loading (CSS): para que serve
O skeleton screen é o esqueleto cinza que aparece no lugar do conteúdo enquanto ele carrega, como no Facebook e no YouTube. Ele mostra o formato do que vai chegar, faz a espera parecer menor e evita que a página pule quando o conteúdo aparece.
Escolha o modelo (card com imagem, lista com avatar, perfil ou parágrafo), quantas vezes repetir, as cores e os cantos. O brilho animado move só o fundo e é desligado para quem pediu menos movimento, e o bloco usa aria-busy com um texto de carregando para leitores de tela.
Como usar
- Escolha o modelo e quantas vezes repetir.
- Ajuste as cores, os cantos e o brilho.
- Copie o código e troque pelo conteúdo quando ele chegar.
Quando usar
- Lista de produtos carregada por API.
- Feed ou lista de comentários.
- Painéis e sistemas web.
Perguntas frequentes
Por que skeleton e não um ícone de carregando?
O esqueleto mostra o formato do que vai aparecer, então a página não pula quando o conteúdo chega e a espera parece mais curta. Funciona melhor para cards, listas e perfis; para ações rápidas, como enviar um formulário, um indicador no próprio botão basta.
Como fica para quem usa leitor de tela?
O bloco recebe aria-busy=true e um texto escondido "Carregando"; os retângulos são decorativos (aria-hidden). Quando o conteúdo chegar, troque o esqueleto pelo conteúdo e tire o aria-busy.
O brilho animado pesa?
Não: a animação move só o fundo de cada retângulo. Para quem configurou o sistema para reduzir movimento, o brilho é desligado e fica só a cor.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.