Componentes
Feedback
Comunicação do estado do sistema durante carregamento. O spinner é o logo do Spinlist em rotação — identidade visual mesmo em espera.
Toast e Skeleton têm páginas próprias: Toast → Skeleton →
Spinner
O que é
O logo do Spinlist (SVG concêntrico) com animate-spin. Não é um spinner genérico — é a identidade da marca em movimento.
Animação
animation: spin 0.8s linear infinite
@keyframes spin { to { transform: rotate(360deg); } }
Anatomia
Spinner isolado
1
Em botão (loading state)
2
1
Spinner de tela cheia
Logo SVG do Spinlist · fill="#C8F53C" · centrado na tela · tamanho lg (w-16)
2
Spinner em botão
Spinner 14px com fill="#0f0f0f" (contraste com botão Filled) · botão em opacity-70 cursor-wait
Tamanhos e contextos
sm · 16px
Dentro de botão (
fill="#0f0f0f" no Filled, fill="#C8F53C" no Secondary)md · 24px
Loading state de seção (ex: carregando feed)
lg · 64px
Splash screen / loading de tela cheia (centrado com texto "Spinando..." abaixo)
Do / Don't
Carregando...
Faça
Use o spinner durante carregamento de dados. Para listas longas, prefira Skeleton antes do spinner.
Evite
Spinners genéricos (círculo com borda) fogem da identidade do Spinlist. Use sempre o logo SVG.
Specs
| Propriedade | Valor |
|---|---|
| SVG | Logo concêntrico do Spinlist (viewBox 0 0 80 80) |
| Fill — tela cheia / seção | #C8F53C |
| Fill — botão Filled | #0f0f0f |
| Fill — botão Secondary | #C8F53C |
| Animação | spin 0.8s linear infinite |
| Tamanho sm | 14–16px — dentro de botão |
| Tamanho md | 24–32px — seção em carregamento |
| Tamanho lg | 64px — tela cheia |
| Botão em loading | opacity-70 cursor-wait · spinner + label "Verbo + -ando" |