Introduction

O componente Spinner é um indicador circular animado usado para representar estados de espera ativos. Excelente para transições rápidas, envios de formulário e sobreposições de carregamento, pode ser personalizado com escalas explícitas e descrições acessíveis.

Usage

Você pode posicionar e configurar spinners assim:

1. Carregador embutido padrão

Um carregador padrão, ideal para indicar progresso do sistema em seções, contêineres centralizados ou painéis laterais.

{
  "type": "spinner",
  "size": "md",
  "label": "Loading..."
}

2. Carregador grande com acento

Apresenta rastreamento visual em grande escala, comumente usado como peça central durante recarregamentos de página inteira ou sincronizações iniciais do workspace.

{
  "type": "spinner",
  "size": "lg",
  "label": "Synchronizing data..."
}

3. Subindicador minúsculo (carregador de botão/contextual)

Um carregador pequeno usado em dashboards densos ou cartões de contexto compactos para implicar recarregamento individual de recursos.

{
  "type": "spinner",
  "size": "sm",
  "label": "Connecting..."
}

Props

Architecture Notes

• Acessível desde o início: Cada spinner compila com um wrapper nativo role="status" contendo rótulos apenas para leitores de tela (class="sr-only"), garantindo o anúncio correto do progresso.
• Renderização SVG pura: As animações usam caminhos vetoriais leves (<svg>) girados via keyframes CSS, sem dependências pesadas nem imagens estáticas.
• Tamanho de layout ótimo: As escalas correspondem exatamente aos tokens de espaçamento do design system, garantindo alinhamento em botões, alertas ou cartões.