MAD Lab

Feedback e display

mad-progress mad-spinner mad-skeleton

Progresso

mad-progress com value, variant, size e label.

35% (padrão)

65% — success, sm

90% — danger, lg

50% — warning

resources/views/tutor/examples/feedback-progresso/valores.blade.php

<div style="display:flex;flex-direction:column;gap:12px;max-width:480px;">
    <mad-progress :value="35" label="35% (padrão)" />
    <mad-progress :value="65" variant="success" size="sm" label="65% — success, sm" />
    <mad-progress :value="90" variant="danger" size="lg" label="90% — danger, lg" />
    <mad-progress :value="50" variant="warning" label="50% — warning" />
</div>

Spinner

mad-spinner nos tamanhos sm/padrão/lg, sozinho ou ao lado de um texto.

padrão

Carregando relatório...

resources/views/tutor/examples/feedback-progresso/spinner.blade.php

<div style="display:flex;align-items:center;gap:32px;">
    <div style="text-align:center;">
        <mad-spinner size="sm" />
        <div style="margin-top:6px;font-size:.8rem;color:#6b7280;">sm</div>
    </div>
    <div style="text-align:center;">
        <mad-spinner />
        <div style="margin-top:6px;font-size:.8rem;color:#6b7280;">padrão</div>
    </div>
    <div style="text-align:center;">
        <mad-spinner size="lg" />
        <div style="margin-top:6px;font-size:.8rem;color:#6b7280;">lg</div>
    </div>
</div>
<div style="height:16px;"></div>
<div style="display:flex;align-items:center;gap:8px;">
    <mad-spinner size="sm" />
    <span>Carregando relatório...</span>
</div>

Skeleton em lista

mad-skeleton simulando linhas de uma listagem carregando.

Linhas de uma listagem enquanto os dados ainda não chegaram do servidor.

resources/views/tutor/examples/feedback-progresso/skeleton-lista.blade.php

<p style="margin:0 0 10px;font-size:.85rem;color:#6b7280;">Linhas de uma listagem enquanto os dados ainda não chegaram do servidor.</p>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;max-width:480px;">
    <mad-skeleton width="36px" height="36px" rounded="full" />
    <mad-skeleton width="70%" height="12px" />
</div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;max-width:480px;">
    <mad-skeleton width="36px" height="36px" rounded="full" />
    <mad-skeleton width="50%" height="12px" />
</div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;max-width:480px;">
    <mad-skeleton width="36px" height="36px" rounded="full" />
    <mad-skeleton width="85%" height="12px" />
</div>

Progresso dinâmico (ação wire real)

mad:click avança/reinicia $pctDemo no servidor e a barra re-renderiza.

20%

resources/views/tutor/examples/feedback-progresso/dinamico.blade.php

@php
    // Escopo isolado do <x-tutor-demo>: pctDemo é prop pública do host
    // (TutorFeedbackProgresso), não atravessa o @include sozinha — resolve via
    // o stack estático de MadRenderContext (ver resources/views/tutor/examples/grids-formatacao/).
    $__component = \Mad\Component\MadRenderContext::getComponent();
@endphp
<div style="max-width:420px;">
    <mad-progress :value="$__component->pctDemo"
        :variant="$__component->pctDemo >= 100 ? 'success' : 'info'"
        :label="$__component->pctDemo . '%'" />
</div>
<div style="height:12px;"></div>
<div style="display:flex;gap:8px;">
    <mad-btn variant="primary" icon="plus" mad:click="onAvancarDemo">Avançar 20%</mad-btn>
    <mad-btn variant="ghost" icon="rotate-ccw" mad:click="onReiniciarDemo">Reiniciar</mad-btn>
</div>

app/control/Tutor/TutorFeedbackProgresso.php

public function onAvancarDemo(): void
{
    $this->pctDemo = min(100, $this->pctDemo + 20);
}

← AnteriorAlertas e callouts Próxima →QR code e código de barras

Código-fonte completo da página

app/control/Tutor/TutorFeedbackProgresso.php

<?php

namespace App\Control\Tutor;

use App\Support\Tutor\TutorPage;

class TutorFeedbackProgresso extends TutorPage
{
    protected string $catalogKey = 'feedback_progresso';

    /** Percentual do exemplo "dinâmico" — persiste entre cliques via wire state. */
    public int $pctDemo = 20;

    public function onAvancarDemo(): void
    {
        $this->pctDemo = min(100, $this->pctDemo + 20);
    }

    public function onReiniciarDemo(): void
    {
        $this->pctDemo = 0;
    }
}

resources/views/tutor/feedback/progresso.blade.php

<x-tutor-page page="feedback_progresso">
    <x-tutor-demo demo="tutor.examples.feedback-progresso.valores"
        title="Progresso" desc="mad-progress com value, variant, size e label." />

    <x-tutor-demo demo="tutor.examples.feedback-progresso.spinner"
        title="Spinner" desc="mad-spinner nos tamanhos sm/padrão/lg, sozinho ou ao lado de um texto." />

    <x-tutor-demo demo="tutor.examples.feedback-progresso.skeleton-lista"
        title="Skeleton em lista" desc="mad-skeleton simulando linhas de uma listagem carregando." />

    <x-tutor-demo demo="tutor.examples.feedback-progresso.dinamico"
        title="Progresso dinâmico (ação wire real)" desc="mad:click avança/reinicia $pctDemo no servidor e a barra re-renderiza."
        php="TutorFeedbackProgresso::onAvancarDemo" />
</x-tutor-page>