Docs›Componentes (Admin)›mad-spinner
Componentes (Admin)

mad-spinner

Spinner indeterminado.

Indicador circular de loading indeterminado. Visual puro, sem estado server-side e sem logica.

Props

Prop Tipo Default Descricao
size string '' sm, '' (normal), lg
class string '' Classes CSS extras

Uso basico

<mad-spinner />

Tamanhos

<mad-spinner size="sm" />
<mad-spinner />
<mad-spinner size="lg" />

Inline com texto

<div style="display:flex;align-items:center;gap:8px;">
    <mad-spinner size="sm" />
    <span>Carregando...</span>
</div>

Estado de carregamento de uma area

<div style="display:flex;align-items:center;justify-content:center;padding:40px;">
    <mad-spinner size="lg" />
</div>

Para spinner em botoes use <mad-btn loading>. Nao montar manualmente.

Quando usar spinner vs outros indicadores

Preciso... Usar
Mostrar % de progresso conhecido (upload, processamento) <mad-progress :value="N">
Indicar loading indeterminado pequeno (inline com texto) <mad-spinner size="sm">
Indicar loading de uma area inteira <mad-spinner size="lg"> centralizado
Loading dentro de botao <mad-btn loading> (NAO <mad-spinner>)
Placeholder de conteudo enquanto carrega lista/card <mad-skeleton>
Indicador de etapas <mad-steps> (NAO spinner)

NUNCA fazer

{{-- ERRADO: spinner manual com div + animation CSS inline --}}
<div class="spinner-border" role="status"></div>

{{-- CERTO --}}
<mad-spinner />

{{-- ERRADO: spinner dentro de botao loading --}}
<mad-btn><mad-spinner size="sm" /> Salvando...</mad-btn>

{{-- CERTO --}}
<mad-btn loading>Salvando...</mad-btn>

{{-- ERRADO: spinner pra indicar progresso conhecido (0-100%) --}}
<mad-spinner /> {{ $pct }}%

{{-- CERTO: usar progress quando o valor e conhecido --}}
<mad-progress :value="$pct" />