Skeleton
Esqueleto — um espaço reservado discreto, no formato do conteúdo que está chegando. Use quando você já conhece o layout, para a página não pular quando os dados aparecerem.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. O estilo carregado cuida do visual.
import { Skeleton } from "@camaleo/react";Anatomia
Um <span> com um brilho suave. Você define a largura e a altura; o shape escolhe entre linha e círculo.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Linha e círculo
Use shape="circle" para avatares e ícones e a line, que é o padrão, para títulos e textos. Dê a cada um o tamanho do que ele representa.
Um parágrafo de texto
Varie a largura das linhas e deixe a última curta. Barras iguais parecem um bloco, não um texto.
Do espaço reservado ao conteúdo
Clique. O cartão mantém cabeçalho, corpo e rodapé enquanto carrega, e o botão continua de verdade e funcionando.
Saldo
Sem pulo ao carregar
Clique. Cada espaço reservado fica numa caixa com a altura de linha do texto que ele espera, então nada abaixo se mexe.
Uma lista marcada como ocupada
O leitor de tela ignora os skeletons. Coloque aria-busy="true" e um nome no contêiner, para a pessoa saber que a lista está carregando.
| Nota | Cliente | Total |
|---|---|---|
Uma tabela carregando
Mantenha os cabeçalhos de verdade e preencha só as células. A pessoa já consegue ler o que a tabela vai mostrar.
Skeleton: você sabe o que vai aparecer
Spinner: uma ação está rodando
Skeleton ou Spinner?
Skeleton quando você sabe o que vai aparecer, como um perfil ou uma lista. Spinner quando uma ação está rodando, como salvar.
Em contexto
O skeleton ocupa o lugar de pedaços inteiros de interface. São estados de carregamento para copiar, no estilo que você escolheu.
Perfil
Atividade
Central de ajuda
CobrançaBoas práticas
Um círculo para o avatar e duas linhas do tamanho certo: a página fica igual quando os dados chegam.
Ela não diz nada sobre o que vem aí, e a página pula quando o layout de verdade aparece.
Dê um nome ao contêiner e use aria-busy="true". Tire quando o conteúdo chegar.
Você já sabe quais são as ações. Mostre os botões de verdade, desativados se ainda não funcionam, para a pessoa ver o que vai poder fazer.
Props
line para textos, circle para avatares e ícones.Os atributos nativos de <span> passam direto. Defina o tamanho com style ou className.
Styling hooks
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Acessibilidade
- Todo Skeleton tem aria-hidden="true", então o leitor de tela pula ele.
- Avise que algo está carregando no contêiner: um nome e aria-busy="true", ou uma mensagem de status para esperas longas.
- Com o movimento reduzido ativado, o brilho para e o espaço reservado fica parado.
- Não coloque parada de tabulação nem clique num skeleton; ainda não há nada para usar.