Carregando…Carregando…Carregando…Carregando…CSS border-spin, orbital, dot and animated-text loader variants with 5 sizes, 4 intents and accessible label.
$ npx kikitocn add spinner@/lib/utilsmotionimport { Spinner } from "@/components/ui/cn/spinner/Spinner";
export function SpinnerExample() {
return (
<Spinner size="xs" intent="primary" />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Tamanho do spinner |
intent | 'primary' | 'secondary' | 'neutral' | 'current' | 'primary' | Cor do spinner (current usa a cor atual do texto) |
variant | 'ring' | 'orbital' | 'bounce-dots' | 'slide-dots' | 'morph-arrow' | 'shimmer-text' | 'pulse-text' | 'ring' | Estilo visual — ring/orbital são ícones; bounce-dots/slide-dots são trios de pontos; morph-arrow é uma seta se preenchendo; shimmer-text/pulse-text animam o próprio texto de `text` |
label | string | undefined | Texto acessível abaixo do indicador (todas as variantes exceto shimmer-text/pulse-text) |
text | string | 'Carregando...' | Texto animado — usado só por variant='shimmer-text' e variant='pulse-text' |
className | string | — | Classes CSS extras |
style | React.CSSProperties | — | Estilos inline extras |
xs · sm · md · lg · xl
primary · secondary · neutral
variant="orbital" — pulsing core + orbiting satellite
variant="bounce-dots" / "slide-dots" — adaptado da Aceternity UI
variant="morph-arrow" — seta se preenchendo em loop
variant="shimmer-text" / "pulse-text" — o texto É o indicador
Anel giratório simples — tamanho e intent configuráveis
3 dots saltando em sequência escalonada