Spinners
Indicadores de carregamento animados para feedback visual. Multiplos tamanhos e variantes de cor.
Spinner Padrao
Preview
HTML
<div class="canta-spinner"></div>Tamanhos
Small / Default / Large
HTML
<div class="canta-spinner canta-spinner--sm"></div>
<div class="canta-spinner"></div>
<div class="canta-spinner canta-spinner--lg"></div>Variantes de Cor
Cores semanticas
Dark Background
HTML
<div class="canta-spinner canta-spinner--primary"></div>
<div class="canta-spinner canta-spinner--secondary"></div>
<div class="canta-spinner canta-spinner--success"></div>
<div class="canta-spinner canta-spinner--danger"></div>
<div class="canta-spinner canta-spinner--magenta"></div>
<div class="canta-spinner canta-spinner--white"></div>Com Texto
Spinner + Label
Carregando...
HTML
<div style="display: flex; align-items: center; gap: 8px;">
<div class="canta-spinner canta-spinner--sm canta-spinner--primary"></div>
<span>Carregando...</span>
</div>API
| Classe | Descricao |
|---|---|
.canta-spinner | Classe base do spinner (obrigatoria) |
.canta-spinner--sm | Tamanho pequeno |
.canta-spinner--lg | Tamanho grande |
.canta-spinner--primary | Cor primaria (azul CANTA) |
.canta-spinner--secondary | Cor secundaria (preto) |
.canta-spinner--success | Cor de sucesso (verde) |
.canta-spinner--danger | Cor de erro (vermelho) |
.canta-spinner--magenta | Cor magenta CANTA |
.canta-spinner--white | Cor branca (para fundos escuros) |