Feedback
Tela de feedback após ação do usuário. Progresso circular com texto dinâmico, transição animada para sucesso ou erro. Reticências pulsantes, draw do check/X, shake no erro. Dark mode automático.
Exemplos
Clique nos botões para ver o fluxo completo: loading → resultado.
Propriedades
Classes disponíveis para configurar o feedback.
| Propriedade | Tipo | Default | Descrição |
|---|---|---|---|
.feedback | classe | — | Container fullscreen. Adicione .is-open para exibir. |
.feedback-content--loading | classe | — | Estado de loading (progresso circular + texto). |
.feedback-content--result | classe | — | Estado de resultado (sucesso ou erro). |
.feedback-progress | classe | — | Círculo de progresso SVG (80x80). |
.feedback-ring-fill | classe | — | Anel de progresso (stroke-dashoffset controlado via JS). |
.feedback-progress-icon | classe | — | Ícone central do loading (save, 32x32). |
.feedback-dots | classe | — | Reticências animadas no título. |
.feedback-result-icon--success | classe | — | Círculo verde com check (animação bounce + draw). |
.feedback-result-icon--error | classe | — | Círculo vermelho com X (animação bounce + shake). |
.feedback-badge--success | classe | — | Badge "Sucesso!" (verde). |
.feedback-badge--error | classe | — | Badge "Ocorreu um erro!" (vermelho). |
.feedback-buttons | classe | — | Container dos botões (flex, gap 20px). |
Tokens utilizados
Variáveis semânticas aplicadas ao componente.
| Token | Uso |
|---|---|
--surface-base-neutral-page-default | Background fullscreen |
--text-base-neutral-default | Título |
--text-base-neutral-subtle | Descrição (loading) |
--text-base-neutral-secondary | Descrição (resultado) |
--icon-base-neutral-default | Ícone save (loading) |
--icon-base-success-default | Círculo check (sucesso) |
--icon-base-error-default | Círculo X (erro) |
--accent-300 | Anel de progresso |
--surface-base-alert-container-success | Badge sucesso |
--surface-base-alert-container-error | Badge erro |