Componentes

Spinner

O logo do Spinlist em rotação. Não é um spinner genérico — é a identidade da marca em movimento, usada em qualquer estado de carregamento.

Visão geral

Carregando...

Spinando...

SVG Vinyl

Path concêntrico do logo Spinlist · fill="#C8F53C" · animation: spin 1s linear infinite. Tamanhos: sm 16px, md 24px, lg 64px.

Label "Spinando..."

font-size:23px · color:#888 · letter-spacing:.02em. Três <span> com dot-blink e delays 0s / 0.2s / 0.4s. Opcional via prop label.

Container

display:flex · flex-direction:column · align-items:center · gap:12px. Centralizado no espaço disponível. Sem padding próprio.

Logo SVG concêntrico do Spinlist com animate-spin. Três tamanhos via prop size. Prop label adiciona "Spinando..." com dots animados.

<Spinner />
<Spinner size="md" />
<Spinner size="sm" />
<Spinner size="lg" label />

sm · 16 px

Dentro de botão (fill="#0f0f0f" no Filled, #C8F53C no Secondary/Ghost)

md · 24 px

Loading de seção (ex: carregando feed, lista de discos)

lg · 64 px

Tela cheia (default) — splash screen e páginas inteiras em carregamento

Isolado label={false}

Com label label={true}

Spinando...

Em botão Filled

Em botão Secondary

Faça Use sempre o SVG do logo. Para listas longas prefira Skeleton ao spinner.

Evite Spinners genéricos (anel com borda) quebram a identidade do Spinlist.

Prop	Tipo	Default	Descrição
`size`	`'sm' \| 'md' \| 'lg'`	`'lg'`	16 px / 24 px / 64 px
`label`	`boolean`	`false`	Exibe "Spinando..." com dots animados abaixo
`className`	`string`	`''`	Classes extras no SVG

Token	Valor
Fill padrão	`#C8F53C` (Lime)
Fill em botão Filled	`#0f0f0f`
Animação	`animate-spin` → `spin 1s linear infinite`
Label — tamanho	23 px · `color:#888` · `letter-spacing:.02em`
Label — dots	`dot-blink 1.2s infinite` · delays 0s / 0.2s / 0.4s
aria-hidden	`true` (decorativo)