Indicatori di avanzamento e stato

1) Principi

1. Risposta istantanea (≤ 100 ms). Ogni azione viene immediatamente confermata visivamente, premendo «busy »/scheletro/microanimazione.
2. Onestà e prevedibilità. Gli interessi riflettono il progresso reale, non l'eterno 99%. Se la valutazione non è possibile, utilizzare un'opzione e una spiegazione non definite.
3. Il contesto è accanto all'attività. L'indicatore è dove l'utente guarda/agisce (pulsante, scheda, blocco), non nell'angolo più lontano.
4. Impercettibilità dopo il successo. Il successo è un breve assegno/feed, tutto qui. Errore: spiegazione comprensibile e ripetizione sicura.
5. La disponibilità predefinita è "rolle =" progressbar "," aria-valuenow ", le regioni live, il contrasto dell'AA.

2) Tipi di indicatori e quando utilizzarli

Progresso lineare (determinate/indeterminate). Caricamento/importazione/esportazione, passaggi con un volume comprensibile.
Progresso circolare (solitamente indeterminate). Brevi operazioni locali in luoghi compatti.
Stepper (passo passo). Fasi sequenziali (Passo 2 di 4), KYC, processi master.
Skeleton (skeleton stub). Per sostituire la struttura dei contenuti al posto degli spinner; evitare «shimmer» per gli utenti con «preferers-reduced-motion».
Stato-badge (success/warning/denger/info). Stato dell'oggetto (In elaborazione, Rifiutato, Finito).
Striscione/brindisi di stato. Eventi globali: offline, guasto del server, sincronizzazione della coda.
Inline loader (pulsante/riga). Operazioni locali: Salva..., Invia...

3) Progressi vs non definiti

Determinate - La quantità di lavoro è nota.
Indeterminate - Volume sconosciuto in corso di elaborazione... + contesto (solitamente fino a 1-2 minuti).
Cambia stato - È possibile iniziare con indeterminate e passare a determinate quando viene visualizzata la valutazione.
ETA attenta: mostra l'intervallo («not 30-60 secondi») ed evita «promesse».

4) Posizionamento e pattern

Locale all'azione: pulsante «aria-busy», spinner nella riga della tabella, progresso nella scheda.
Sopra il blocco/elenco, il bar di linea sotto l'heder della sezione per le operazioni batch.
Globale: avanzamento sottile superiore (route-change), banner di sistema.
Pannello Sticky (mob) - conferma/progresso del CTA al molo inferiore.

5) Disponibilità (A11y)

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

Indeterminate: mostra «role =» progressbar «senza» aria-valuenow «, aggiungi il testo spiegativo in» role = «status».
Regioni Lave: "aria-live =" polite "per gli aggiornamenti normali," assistenziale "solo per i critici.
"aria-busy =" true "su un contenitore temporaneamente bloccato dalle attività.
Non salta. Quando si cambia fase, si sposta l'intestazione del passo stepper.

6) Copiratting e semantica visiva

In breve e sul caso: «In corso di caricamento»..., «In corso di elaborazione del pagamento»....
Aggiungete «cosa più avanti». Aggiorna automaticamente la pagina".
Colori: verde - successo, arancione - avviso/attenzione, rosso - errore. Il colore è l'unico supporto di significato.

7) Aggiornamenti e rimborsi ottimistici

Ottimista: cambiamo l'UI immediatamente (ad esempio, In preferiti) e confermiamo silenziosamente il server.
Se si verifica un errore, è possibile ripristinare in modo morbido la spiegazione e Ritry.
Transazioni critiche (tasso/pagamento): opzionalmente "morbido ottimismo" (registriamo "Inviato" In attesa di conferma "...), ma senza modificare lo stato di cassa prima della conferma.

8) Code e operazioni di sfondo

Mostra la coda «n» delle operazioni in lavorazione, le singole schede di avanzamento.
Interrompere/annullare le operazioni a lungo termine, se possibile.
Elaborazione in sottofondo: segnaposto In sfondo, toast al termine, Cronologia attività.

9) Performance e timing

La prima reazione è 100 ms: usa skeleton/inline-busy invece di vuoto.
Animazioni: 120-180 ms (in), 80-140 mc (out), solo 'form/opacity'.
Processi lunghi: aggiornamento del progresso fino a 10-15 volte al secondo; raggruppare le modifiche.

10) Snippet

Progresso locale in un pulsante

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 lineare

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 corretto

Usa la forma del futuro contenuto (schede/righe), senza shimmer infinito (o disattivare con «preferers-reduced-motion»).
Limite di tempo: se il download> 300-500 ms, skeleton è giustificato; Con meno ritardi, basta un micro-feed.

12) Stato-badge (stati oggetto)

Esempi: bozza, In elaborazione, In attesa di conferma, Fine, Rifiutato.

Testo breve, colori di icona/sfondo resistenti, contrasto di ≥ AA.
Icona "aria-hidden =" true "+ etichetta di testo (per SR).
Click, sveliamo i dettagli o apriamo la Storia.

13) Specificità del iGaming

• Clicca su CTA «Inviato»..., in caso di ritardo> 3 c - «In attesa di conferma...» (indeterminate).
• Successo: «Scommessa accettata» + assegno; l'errore è una spiegazione valida («periodo di mercato chiuso/fattore cambiato») e una Retry sicura.

• Determinato per fasi: Verifica metodo di → Invio → Conferma PSP.
• Per l'output è un segnalibro In elaborazione, schermata di stato nel profilo, intervallo ETA; Un po'al termine.

• Stepper registrazione (passi), avanzamento al premio (N/punti), badge di stato Partecipa.
• Il Real Time aggiornamento - con attenzione, senza lampeggianti, con'aria-live = «polite».

• Stepper + badge «A prova». Mostrate cosa è già stato accettato (spunta) e cosa rimane.

14) Colori, contrasto e testo

Success/Info/Warning/Tanger sono quattro tonalità sostenibili nel design.
Contrasto del testo al fondo del badge AA.
Non utilizzare lo stesso colore per «in lavorazione» o «avviso».

15) Metriche

Time-to-First-Feedback (TTFF) - Dal click alla prima risposta visiva.
Completamento Time per operazioni e drop/abort rate per lunghe attività.
Retry success rate per operazioni avanzate.
% di ottimisti completati con successo (e percentuale di rimborsi).
Visibile time skeleton/spinner (obiettivo: minor numero possibile).

16) Anti-pattern

Pulsante muto (niente busy/spinner)> 100 ms.
Spinners infiniti senza spiegazioni o alternative.
False percentuali/cursore dipendente al 99%.
Reimpostazione dei contenuti in caso di errore senza possibilità di ripetizione.
Solo un colore senza testo o icona per lo stato.
I progressi sono lontani dall'attività (l'utente non vede).

17) Token di progettazione (esempio)

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) Lista assegni QA

Risposta e onestà

• TTFF da 100 ms; c'è un locale busy/skeleton.
• Determinate - reale%; indeterminate - con una spiegazione.

Disponibilità

• 'role =' progressbar '/' aria-valuenow'corretti; Le regioni live sono aggiornate.
• Contrasto dei badge/testo dell'AA; il colore non è l'unico portatore di significato.

Comportamento

• Ottimista con un corretto ritorno e spiegazione.
• Le code vengono visualizzate. c'è un annullamento/pausa (se applicabile).
• Il progresso vicino alla sede non sovrappone il CTA.

Performance

• Aggiornamenti di almeno 10-15 volte/s; animazioni'form/opacity '.
• Skeleton non prende in giro shimmer con reduce-motion.

Testi

• Breve, senza tecjargon; "Cosa succederà dopo la fine.
• Senza «promesse» di un'ora esatta, se non garantita.

19) Documentazione in progettazione

Компоненты: `ProgressBar`, `ProgressCircle`, `Stepper`, `StatusBadge`, `InlineLoader`, `Skeleton`.
Regole di selezione del tipo, copiatura e colori per gli stati.
Pattern: ottimismo, code, elaborazione di sottofondo, sincronizzazione off-line.
Do/Don't-gallery: «spinner eterno», false percentuali, «muto» CTA vs buono TTFF.

Breve riepilogo

Gli indicatori di progresso e di stato devono fornire un feedback tempestivo, onesto e accessibile. Posizionarli accanto all'azione, distinguere tra progressi concreti e incerti, rispettare a11y e non abusare delle animazioni. Nel iGaming è particolarmente importante per scommesse, pagamenti, tornei e KYC - un progresso sereno e prevedibile aumenta direttamente la fiducia e la conversione.