Spinner
Indicador giratório que mostra que algo está carregando quando não dá para dizer quanto falta. Anuncia o rótulo ao leitor de tela e herda a cor e o tamanho do texto.
Instalação
Configure o Camaleo uma vez (Instalação) e importe. Ele renderiza no servidor.
import { Spinner } from "@camaleo/react";Anatomia
Um contêiner com role="status", o anel girando e um rótulo escondido visualmente.
Exemplos
Tamanhos
Ele tem 1em de largura, então segue o font-size. Dentro do texto, acompanha a linha.
Cor
Ele usa currentColor. Defina a color com um token para manter o contraste em todos os estilos.
Com texto visível
Quando o texto está na tela, esconda-o da tecnologia assistiva (aria-hidden) para o status não ser lido duas vezes.
No meio de uma frase
Ao lado do texto, ele acompanha a altura da linha. Diga quanto falta quando souber ("3 de 12").
Num botão
Não coloque um spinner à mão dentro do botão: use Button loading, que mantém a largura e o foco.
Verificando um campo
Um spinner na descrição do campo enquanto o valor é validado no servidor.
Em contexto
Pedidos recentes
Enviando relatorio.pdf
2,4 MB · cerca de 10 segundos
Boas práticas
"Sincronizando" é melhor que um "Carregando" genérico, e o rótulo é o que o leitor de tela fala.
Se você sabe a porcentagem, mostre.
A espera fica melhor quando a pessoa vê o fim.
Pedidos recentes
O skeleton mostra o formato do que vem; o spinner diz que está a caminho.
Props
role="status".Todos os atributos de <span> passam direto: style, className, aria-*.
Styling hooks
Atributos
Tokens que ele lê
Só deste componente
Acessibilidade
- O role="status" anuncia o rótulo com educação, sem mover o foco.
- Com prefers-reduced-motion, a animação fica mais suave pelo --cml-spinner-ease.
- Marque a região que está carregando com aria-busy="true" para a tecnologia assistiva esperar.