Pharos
Navegar componentes
← Componentes

Spinner

MiscExemplo
Indicador de carregamento animado para processos com duração desconhecida, como busca de dados ou envio de formulário. Suporta rótulos visíveis, vários tamanhos e um variant de fundo escuro. Para conteúdo com dimensões conhecidas, use Skeleton em vez disso.
Importação
import {Spinner} from '@pharos-ds/core/Spinner';

Exemplos

Área interativa

size
shade
Código
import {Spinner} from '@pharos-ds/core/Spinner';

<Spinner
  size="md"
  shade="default"
 />

Boas práticas

  • Faça: Forneça um rótulo significativo para descrever o que está carregando para usuários de leitores de tela.
  • Faça: Use o shade "onMedia" quando posicionado sobre fundos escuros ou em cores de destaque.
  • Evite: Use para áreas de conteúdo com dimensões conhecidas; use Skeleton para preservar o layout.
  • Evite: Empilhe vários spinners na mesma visualização; use um para representar o estado de carregamento geral.

Props

PropTipoPadrãoDescrição
size'sm' | 'md' | 'lg''md'Tamanho do Spinner (10px, 14px, 18px).
shade'default' | 'onMedia' | 'subtle' | 'inherit''default'Shade de cor para fundos claros ou escuros.
labelReactNode—Conteúdo visível abaixo do spinner. Rótulos string definem aria-label automaticamente.
aria-labelstring'Loading'Nome acessível para leitores de tela. Padrão é label (se string) ou "Loading".
xstyleStyleXStyles—Estilos StyleX para personalização de layout (margens, posicionamento, dimensionamento). Deve ser um valor stylex.create(), não um objeto de estilo inline como style={{}}.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/Spinner
Spinner · Pharos