Indicadores de progresso e estatais

1) Princípios

1. Resposta instantânea (≤ 100 ms). Qualquer ação é imediatamente confirmada visualmente por clicar em → 'busy '/esqueleto/microanimação.
2. Honestidade e previsibilidade. Os juros refletem o progresso real, não o «eterno 99%». Se a avaliação não for possível, use a opção e a explicação não definidas (indeterminate).
3. O contexto está ao lado da ação. O indicador é onde o usuário vê/age (botão, cartão, bloco) e não no canto mais distante.
4. Imperceptível depois do sucesso. Sucesso - cheque curto/feed e tudo. O erro é uma explicação clara e uma repetição segura.
5. Disponibilidade padrão. 'role =' progressbar ',' aria-valuenow ', regiões live, contraste ≥ AA.

2) Tipos de indicadores e quando usá-los

Progresso linear (detrinate/indeterminate). Carregar/importar/exportar, passos com volume compreensível.
Progresso circular (normalmente indeterminate). Operações locais curtas em locais compactos.
Stepper (passo a passo). Etapas sequenciais (Passo 2 de 4), KYC, processos-mestre.
Skeleton (esqueleton-bronzeamento). Para substituir estrutura de conteúdo em vez de spinners; evite «shimmer» para os usuários com «prefers-reduced-motion».
Status-crachá (sucess/warning/danger/info). Estado do objeto (Em processamento, Rejeitado, Pronto).
Banner/brinde status. Eventos globais: offline, servidor falhado, fila sincronizada.
Inline loader (botão/linha). Operações locais: «Salvar»..., «Enviar»....

3) Certo vs progresso incerto

Determinate: A quantidade de trabalho é conhecida → mostramos %/etapas.
Indeterminate: volume desconhecido → «Processamento em andamento»... + contexto («Normalmente até 1-2 min»).
Mudança de estado: você pode começar com o indeterminate → ir para o determinate quando a avaliação aparecer.
O ETA tem cuidado: mostre a faixa («£30-60 segundos») e evite «promessas».

4) Acomodação e pattern

Local à ação, botão 'ária-busy', spinner na linha da tabela, progresso no cartão.
Acima do bloco/lista, um bar de linha sob o header da secção em transações de lote.
Global: Avanços finos superiores, banners de sistema.
Painel Sticky (mob) : confirmação/progresso em CTA na doca inferior.

5) Disponibilidade (A11y)

html
<div role = "progressbar" aria-valuemin =" 0" aria-valuemax =" 100" aria-valuenow =" 42" aria-label = "Load Report "> </div>

Indeterminate: Exponha 'role =' progressbar 'sem' aria-valuenow ', adicione um texto explicativo em' role = 'status'.
Regiões Live: 'aria-live =' polite 'para atualizações normais,' assertive 'apenas para críticos.
'ária-busy =' true 'no contêiner que está temporariamente bloqueado.
O foco não salta: quando você mudar de fase, mova o foco para o cabeçalho da etapa.

6) Copiatagem e semântica visual

Em breve e no caso, «Está em andamento o download»..., «Processando o pagamento»...
Adicione o seguinte: Atualizar a página automaticamente".
Cores: verde - sucesso, laranja - alerta/atenção, vermelho - erro. A cor ≠ o único meio de sentido: dê um ícone/texto.

7) Atualizações otimistas e reversões

Otimista: Alterando a UI imediatamente (por exemplo, a marca «No favorito») e confirmando silenciosamente o servidor.
Erro: retrocesso suave + explicação e 'Retry'.
Transações críticas (taxa/pagamento): opcionalmente «suave otimismo» (registrando «Enviado → Aguardando confirmação»...), mas sem alteração do estado monetário antes da confirmação.

8) Filas e tarefas de fundo

Mostre a fila de tarefas de processamento, cartões individuais de progresso.
Dê uma pausa/cancelamento para operações longas, se possível.
Processamento em segundo plano: crachá no fundo, brindes após a conclusão, seção Histórico de tarefas.

9) Performance e timing

Primeira resposta ≤ 100 ms: use skeleton/inline-busy em vez de vazio.
Animações: 120-180 ms (in), 80-140 ms (out), apenas 'trans/opacity'.
Processos longos: atualização do progresso no máximo 10-15 vezes/segundo; agrupe as alterações.

10) Snippets

Progresso local do botão

html
<button id="export" class="btn" aria-busy="false">Экспорт CSV</button>
<script>
const btn = document. getElementById('export');
btn. addEventListener('click', async () => {
btn. setAttribute('aria-busy','true'); btn. disabled = true;
try {
const r = await fetch('/api/export', { method:'POST' });
if(!r.ok) throw new Error();
//show toast "Export has begun. We will notify upon readiness"
} catch {
//toast with cause and Retry
} finally {
btn. disabled = false; btn. setAttribute('aria-busy','false');
}
});
</script>

Determinate linear

html
<div class="progress">
<div class="bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
</div>
<style>
.progress{height:4px; background:var(--bg-muted); border-radius:999px; overflow:hidden}
.progress. bar{height:100%;width:0%;background:var(--accent); transition:width. 16s}
</style>
<script>
const bar = document. querySelector('.progress. bar');
let n=0; const t=setInterval(()=>{ n=Math. min(100, n+5); bar. style. width=n+'%'; bar. setAttribute('aria-valuenow',n); if(n===100) clearInterval(t); },160);
</script>

Stepper

html
<nav aria-label = "Progress">
<ol class="steps">
<li class = "done "> <span> 1 </span> Data </li>
<li class = "current" aria-current = "step "> <span> 2 </span> Documents </li>
<li> <span> 3 </span> Confirmation </li>
</ol>
</nav>

11) Skeleton correto

Use o formulário de conteúdo futuro (cartões/linhas), sem shimmer infinito (ou desabilite quando 'prefers-reduced-motion').
Limite de tempo: se o download> 300-500 ms, o skeleton é justificado; Com menos atrasos, basta «micro-feed».

12) Status de crachá (estados de objeto)

Exemplos: rascunho, Em processamento, Aguardando confirmação, Pronto, Rejeitado.

Texto curto, cores sustentáveis ícone/fundo, contraste ≥ AA.
Ícone 'ária-hidden =' true '+ editora de texto (para SR).
No clique, revelamos os detalhes ou abrimos a História.

13) Especificidades iGaming

• Clicar em CTA → «Enviado»..., com atraso> 3 c - «Aguardando confirmação...» (indeterminate).
• Sucesso - «Taxa aceita» + cheque; erro - uma explicação justa («período de mercado encerrado/coeficiente alterado») e um Retry seguro.

• Determinate por etapa: «Verificação do método → Envio → Confirmação PSP».
• Para a saída - crachá Em processamento, tela de status no perfil, faixa ETA; Um pênalti quando terminar.

• Stepper inscrição (passos), progressão para prêmio (N/pontos), crachá de status «Participando».
• Real time atualização - com cuidado, sem piscar, com 'aria-live =' polite '.

• Stepper + crachá de verificação. Mostre o que já foi aceito e o que resta.

14) Cores, contraste e texto

Sucess/Info/Warning/Danger - quatro tons sustentáveis em design.
Contraste do texto para o fundo do crachá ≥ AA.
Não use a mesma cor para «processar» ou «avisar».

15) Métricas

Time-to-First-Feedback (TTFF): desde o clique até a primeira resposta visual.
O Tempo de Compressão em operações e drop/abort rate para tarefas longas.
Retry sucess rate para operações de progresso.
% de otimismo concluído com sucesso (e proporção de reembolsos).
Visível time skeleton/spinner (alvo: o mínimo possível).

16) Anti-pattern

Botão mudo (sem busy/spinner)> 100 ms.
Spinners infinitos sem explicação ou alternativa.
Juros falsos/rastejador dependente de 99%.
Redefinir conteúdo quando o erro não é possível repetir.
Apenas cor sem texto/ícone para status.
O progresso está longe do local (o usuário não vê).

17) Sistema de design de tokens (exemplo)

json
{
"progress": {
"barHeight": 4,
"radius": 999,
"inMs": 160,
"outMs": 120,
"pollHz": 10
},
"status": {
"tones": { "success": "#", "info": "#", "warning": "#", "danger": "#" },
"badge": { "radius": 8, "px": "6 10", "icon": 14 }
},
"skeleton": {
"rowHeight": 16,
"gap": 8,
"reduceMotion": true
},
"a11y": {
"useAriaBusy": true,
"live": "polite",
"contrastAA": true
}
}

css
.badge{display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border-radius:8px; font-size:.875rem}
.badge--success{background:var(--bg-success); color:var(--on-success)}
.skeleton{background:linear-gradient(90deg, var(--sk1), var(--sk2), var(--sk1)); border-radius:8px}
@media (prefers-reduced-motion: reduce){.skeleton{background:var(--sk1)} }

18) QA-folha de cheque

Resposta e honestidade

• TTFF ≤ 100 ms; há um busy/skeleton local.
• Determinate - real%; indeterminate - com uma explicação.

Disponibilidade

• 'role =' progressbar '/' aria-valuenow 'são corretos; Regiões live em atualizações.
• Contraste de crachá/texto ≥ AA; a cor não é o único hospedeiro de sentido.

Comportamento

• Otimista com retração correta e explicação.
• As filas são exibidas; há cancelamento/pausa (se aplicável).
• O progresso perto do local não se sobrepõe ao CTA.

Performance

• Atualizações de 10 a 15 vezes/segundo no máximo; animação 'transform/opacity'.
• O Skeleton não está a mexer com o shimmer 'om' em 'reduse-motion'.

Textos

• Curto, sem tecjargão; «o que se segue» depois de terminado.
• Sem «promessas» de tempo exato, se não for garantido.

19) Documentação em design

Компоненты: `ProgressBar`, `ProgressCircle`, `Stepper`, `StatusBadge`, `InlineLoader`, `Skeleton`.
Regras de seleção de tipos, copiações e cores para estatais.
Pattern: otimismo, filas, processamento de fundo, sincronização off-line.
Do/Don 't galeria: «spinner eterno», juros falsos, «mudo» CTA vs bom TTFF.

Resumo curto

Os indicadores de progresso e estatais devem fornecer um feedback oportuno, honesto e acessível. Coloque-os ao lado da ação, distingue entre o progresso determinado e incerto, respeite a11y e não abuse da animação. Em iGaming, isso é particularmente importante para apostas, pagamentos, torneios e KYC - progresso tranquilo, previsível aumenta diretamente a confiança e conversão.