Ravox KitBásicos
Giro
Indicador de carregamento em três tamanhos: o arco que herda a cor do texto em volta (botão, campo, tabela) ou o mosaico das quatro cores da casa. Sempre com um rótulo para leitores de tela.
Carregando pedidos
Ajustes
Variante
Tamanho
Exemplos
Tamanhos
CarregandoCarregandoCarregandoCarregandoCarregandoCarregando
Herda a cor
SincronizandoSalvando rascunho
Dentro de um campo
Carregando a página
Montando o relatório de setembro
Montando o relatório de setembro…
Instalação
O shadcn cria components/ui/giro.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/giro.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| variante | "arco" | "mosaico" | "arco" | Arco girando na cor do texto, ou os quatro quadradinhos acendendo em roda. |
| tamanho | "pequeno" | "medio" | "grande" | "medio" | 14, 20 ou 32px. |
| rotulo | string | "Carregando" | O que está carregando. Lido por leitores de tela (role="status") mesmo escondido. |
| mostrarRotulo | boolean | false | Mostra o rótulo ao lado do giro. |
| ...props | ComponentProps<"span"> | — | Tudo o que um <span> aceita. A cor do arco vem de text-*. |