Wskaźniki postępu i stanu

1) Zasady

1. Natychmiastowa odpowiedź (≤ 100 ms). Każde działanie jest natychmiast potwierdzone wizualnie: naciśnięcie „zajętego ”/szkieletu/mikroanimacji →.
2. Uczciwość i przewidywalność. Procenty odzwierciedlają rzeczywisty postęp, a nie „wieczne 99%”. Jeżeli ocena nie jest możliwa, należy użyć nieokreślonego wariantu i wyjaśnienia.
3. Kontekst obok aktywności. Wskaźnik jest tam, gdzie użytkownik szuka/działa (przycisk, karta, blok), nie w dalekim rogu.
4. Kradzież po sukcesie. Sukces jest krótki czek/zanik i to wszystko. Błąd - zrozumiałe wyjaśnienie i bezpieczne powtarzanie.
5. Domyślna dostępność. 'role =' progressbar ',' aria-valuenow ', regiony żywe, kontrast ≥ AA.

2) Rodzaje wskaźników i kiedy je stosować

Postęp liniowy (określić/nieokreślony). Załadunek/import/eksport, kroki z jasnym zakresem.
Postęp kołowy (zwykle nieokreślony). Krótkie lokalne operacje w zwartych miejscach.
Krok po kroku. Etapy sekwencyjne („Krok 2 z 4”), KYC, procesy główne.
Szkielet (wtyczki szkieletowe). Zastąpienie struktury treści zamiast spinnerów; unikać „shimmer” dla użytkowników z „Preferers-reduced-motion”.
Odznaki stanu (sukces/ostrzeżenie/niebezpieczeństwo/informacje). Stan obiektu (In Process, Rejected, Ready).
Baner/status toast. Globalne wydarzenia: offline, awaria serwera, synchronizacja kolejki.
Ładowarka wewnętrzna (przycisk/linia). Operacje lokalne: "Zapisz"..., "Wyślij'....

3) Definitywny a niepewny postęp

Określić: ilość pracy jest znana → pokazujemy %/etapy.
Nieokreślony: nieznana objętość → „Przetwarzanie w toku”... + kontekst („Zwykle do 1-2 minut”).
Stan przejścia - Możesz zacząć od nieokreślonego → przejdź do określenia, kiedy pojawi się ocena.
ETA ostrożnie: pokaż zakres („~ 30-60 sekund”) i unikaj „obietnic”.

4) Umieszczenie i wzory

Lokalnie do działania: przycisk „aria-busy”, spinner w wierszu tabeli, postęp karty.
Powyżej bloku/listy: pasek liniowy poniżej nagłówka sekcji podczas operacji serii.
Globalny: najwyższy subtelny postęp (zmiana trasy), banery systemowe.
Lepki panel (mobilny): potwierdzenie/postęp w CTA w dolnym doku.

5) Dostępność (A11y)

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

Indeterminate: set 'role = „progressbar”' without 'aria-valuenow', add explanatory text to 'role =' status '.
Regiony żywe: 'aria-live =' grzeczny 'dla regularnych aktualizacji,' asertywny 'tylko dla krytycznych.
"aria-busy =" true "na kontenerze, który jest tymczasowo blokowany przez działania.
Focus nie „skakać”: podczas zmiany sceny, przenieść ostrość do nagłówka kroku kroku.

6) Kopiowanie i semantyka wizualna

Krótko i w przypadku: „Załadunek w toku”..., „Przetwarzanie płatności”....
Dodaj "co dalej": "Zrobione. Odświeżmy stronę automatycznie.
Kolory: zielony - sukces, pomarańczowy - ostrzeżenie/uwaga, czerwony - błąd. Kolor i jedyne medium o znaczeniu: podaj ikonę/tekst.

7) Aktualizacje i pullbacks

Optymistycznie: natychmiast zmieniamy interfejs użytkownika (na przykład znak „Ulubione”) i po cichu potwierdzamy go za pomocą serwera.
W przypadku błędu - miękki rollback + wyjaśnienie i 'Retry'.
Operacje krytyczne (stawka/płatność): opcjonalnie „optymistyczne” (fix „Wysłane → Czekanie na potwierdzenie”...), ale bez zmiany stanu pieniężnego przed potwierdzeniem.

8) Kolejki i zadania podstawowe

Pokaż kolejkę: 'n' zadania w przetwarzaniu, poszczególne karty z postępem.
Wstrzymaj/anuluj długie operacje, jeśli to możliwe.
Przetwarzanie tła: „W tle” odznaka, toast po zakończeniu, „Historia zadań” sekcja.

9) Wydajność i terminy

Pierwsza reakcja ≤ 100ms: użyć szkieletu/inline-busy zamiast pustki.
Animacje: 120-180 ms (in), 80-140 ms (out), tylko „transformacja/nieprzezroczystość”.
Długie procesy: aktualizacja postępu nie więcej niż 10-15 razy/s; Zmiany grupowe.

10) Snippety

Lokalny postęp przy przycisku

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>

Określenie liniowe

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) Szkielet poprawny

Użyj formy przyszłych treści (karty/linie), bez niekończącego się migotania (lub wyłączyć z „Preferers-reduced-motion”).
Termin: jeśli załadunek> 300-500 ms, szkielet jest uzasadniony; przy niższych opóźnieniach „mikro-blaknięcie” wystarczy.

12) Odznaki stanu (stan obiektu)

Przykładami są: Projekt, Proces, Oczekujące potwierdzenie, Gotowe, Odrzucone.

Krótki tekst, stabilne kolory ikony/tła, kontrast ≥ AA.
Ikona 'aria-ukryta =' true '+ etykieta tekstowa (dla SR).
Kliknij - ujawnij szczegóły lub otwórz „Historia”.

13) Specyfika iGaming

• Naciśnięcie CTA → „Wysłany”..., z opóźnieniem> 3 sekund - „Czekając na potwierdzenie”... (nieokreślone).
• Sukces - „Bet accepted” + check; błąd - uczciwe wyjaśnienie („okres rynkowy zamknięty/stosunek zmieniony”) i bezpieczne Retry.

• Określić według etapów: „Sprawdź metodę → Wyślij → Potwierdź PSP”.
• Dla wyjścia - W odznaki procesowej, ekran stanu w profilu, zakres ETA; nacisnąć na zakończenie.

• Krok rejestracyjny (kroki), postęp w przyznawaniu (N/punkty), odznaka statusu „Uczestniczący”.
• Aktualizacja w czasie rzeczywistym - schludny, bez mrugnięć, z 'aria-live =' grzeczny '.

• Stepper + odznaka "Under Review. "Pokaż, co jest już akceptowane (kleszcz) i co zostało.

14) Kolory, kontrast i tekst

Sukces/Info/Ostrzeżenie/Niebezpieczeństwo - cztery stabilne dźwięki w systemie projektowania.
Kontrast tekstu z tłem odznaki ≥ AA.
Nie używaj tego samego koloru do „w trakcie” i „ostrzeżenia”.

15) Metryka

Czas do pierwszego sprzężenia zwrotnego (TTFF): kliknij, aby uzyskać pierwszą odpowiedź wizualną.
Zakończenie Czas na operacje i spadek/abort szybkość dla długich zadań.
Powtórny wskaźnik sukcesu dla operacji postępu.
% optymistów, którzy zakończyli pomyślnie (i udział w rolkach).
Widoczny szkielet/spinner czasu (cel: jak najmniej).

16) Anty-wzory

Cichy przycisk (bez zajętego/spinnera)> 100 ms.
Nieskończone spinery bez wyjaśnienia lub alternatywy.
Fałszywy procent/99% zawieszony suwak.
Zresetuje zawartość w przypadku awarii i nie można jej ponownie wypróbować.
Tylko kolor bez tekstu/ikon dla statusu.
Postęp jest daleki od działania (użytkownik nie widzi).

17) Żetony systemu projektowania (przykład)

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 kontrolna QA

Reakcja i uczciwość

• TTFF ≤ 100 ms; istnieje miejscowy zajęty/szkielet.
• Określić - rzeczywisty%; nieokreślony - z wyjaśnieniem.

Dostępność

• 'rola =' progressbar '/' aria-valuenow 'poprawna; regiony na żywo na aktualizacjach.
• Kontrast odznaki/tekst ≥ AA; kolor nie jest jedynym nosicielem znaczenia.

Zachowanie

• Optymistyczne z prawidłowym odwróceniem i wyjaśnieniem.
• Wyświetlane są kolejki; nastąpiło anulowanie/wstrzymanie (w stosownych przypadkach).
• Postępy w pobliżu sceny nie pokrywają się z CTA.

Wydajność

• Aktualizacje nie więcej niż 10-15 razy/s; animacje "transform/dymorfizm'.
• Szkielet nie drażni się z „reduce-motion”.

Teksty

• Krótki, bez żargonu technicznego; „co dalej” po zakończeniu.
• Brak „obietnic” dokładnego czasu, chyba że gwarantowane.

19) Dokumentacja w systemie projektowym

Кобонента: „Na pasku”, „Na okręgu”, „Na Stepperze”, „Na Badge”, „Na Skeletonie”.
Zasady wyboru typu, kopiowania i kolorów statusów.
Wzory: optymistyczne, kolejki, przetwarzanie tła, synchronizacja offline.
Do/Don gallery: „perpetual spinner”, false percentages, „mute” CTA vs good TTFF.

Krótkie podsumowanie

Wskaźniki postępu i statusu powinny zapewniać terminowe, uczciwe i dostępne informacje zwrotne. Umieść je obok akcji, odróżnić definitywny i niepewny postęp, szanować a11y i nie nadużywać animacji. W iGaming jest to szczególnie ważne dla zakładów, płatności, turniejów i KYC - spokojny, przewidywalny postęp bezpośrednio zwiększa zaufanie i konwersję.