Spinner
Indica progresso indeterminado para uma operação em andamento.
- Status
- Beta
- Distribuição
- Source via shadcn
Design
Preview funcional
Carregando preview funcional…
Explorar anatomia e estados visuais
Anatomia
- Track
- Indicador
Variantes e estados
lgmdon-colorsm
Uso
Quando usar
- a duração é desconhecida e não há estrutura de conteúdo para antecipar.
Quando não usar
- o progresso pode ser medido ou um Skeleton comunica melhor a espera.
Composição React
import { Spinner } from "@/components/ui/spinner"
<Spinner aria-label="Sincronizando preferências" size="md" />Implementação
Instalação
Configure o namespace uma única vez na integração React.
npx shadcn@latest add @tis/spinnerpnpm dlx shadcn@latest add @tis/spinneryarn dlx shadcn@latest add @tis/spinnerbunx --bun shadcn@latest add @tis/spinnerContrato público
- Item do registry
@tis/spinner- Distribuição
- Source copiado para a aplicação
- Status
- Beta
Arquitetura técnica
- Provider
- Apresentação React
- Papel do provider
- Nativo ou composição
- Arquitetura comportamental
- Base UI
- CSS
ds-tis/css
Acessibilidade
Semântica e comportamento
Forneça aria-label contextual e evite múltiplos status concorrentes para o mesmo carregamento.
Responsabilidade do consumidor
- fornecer nomes e descrições acessíveis contextuais;
- preservar teclado, foco visível e HTML semântico;
- testar conteúdo, fluxo e contraste reais na aplicação.
Evidência de validação
Instalado no consumer React/Vite permanente e coberto por build de produção, browser, responsividade e Axe.