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

mad-progress

Barra de progresso 0-100%.

Barra de progresso horizontal mostrando um valor conhecido de 0 a 100%. Visual puro, sem estado server-side.

Props

Prop Tipo Default Descricao
value int 0 Valor de 0 a 100 (clamp automatico)
size string '' sm, '' (normal), lg
variant string '' success, warning, danger, info
label string '' Texto auxiliar abaixo da barra (alinhado a direita)
class string '' Classes CSS extras

Uso basico

<mad-progress :value="40" />

Variantes de cor

<mad-progress :value="25" variant="info" />
<mad-progress :value="65" variant="success" />
<mad-progress :value="80" variant="warning" />
<mad-progress :value="95" variant="danger" />

Tamanhos

<mad-progress :value="50" size="sm" />
<mad-progress :value="50" />
<mad-progress :value="50" size="lg" />

Com label

<mad-progress :value="$pct" variant="success" :label="$pct . '% concluido'" />

Valor dinamico via PHP

@php $pct = (int) round(($atual / $total) * 100); @endphp
<mad-progress :value="$pct" variant="info" :label="$atual . ' / ' . $total" />

Quando usar progress vs outros indicadores

Preciso... Usar
Mostrar % de progresso conhecido (upload, processamento) <mad-progress :value="N">
Indicar loading indeterminado (sem % conhecido) <mad-spinner>
Loading dentro de botao <mad-btn loading> (NAO <mad-progress>)
Placeholder de conteudo enquanto carrega lista/card <mad-skeleton>
Indicador de etapas (wizard multi-step) <mad-steps> (NAO <mad-progress>)

NUNCA fazer

{{-- ERRADO: barra de progresso manual --}}
<div class="progress"><div class="progress-bar" style="width:50%"></div></div>

{{-- CERTO --}}
<mad-progress :value="50" />

{{-- ERRADO: progress para indicar etapa de processo (passo 2 de 4) --}}
<mad-progress :value="50" label="Etapa 2 de 4" />

{{-- CERTO: usar steps para etapas --}}
<mad-steps variant="dots" current="2">...</mad-steps>

{{-- ERRADO: progress para loading indeterminado (sem % conhecido) --}}
<mad-progress :value="100" label="Carregando..." />

{{-- CERTO: spinner para indeterminado --}}
<mad-spinner />

{{-- ERRADO: valor fora de 0-100 esperando clamp manual --}}
<mad-progress :value="$baixados / $total" />

{{-- CERTO: normalizar pra 0-100 antes de passar --}}
@php $pct = (int) round(($baixados / max($total, 1)) * 100); @endphp
<mad-progress :value="$pct" />