Індикатори прогресу і статусів

1) Принципи

1. Моментальний відгук (≤ 100 мс). Будь-яка дія відразу підтверджується візуально: натискання →'busy '/скелет/мікроанімація.
2. Чесність і передбачуваність. Відсотки відображають реальний прогрес, а не «вічний 99%». Якщо оцінка неможлива - використовуйте не визначений (indeterminate) варіант і пояснення.
3. Контекст поруч з дією. Індикатор там, де користувач дивиться/діє (кнопка, картка, блок), а не в дальньому кутку.
4. Непомітність після успіху. Успіх - короткий чек/фейд і все. Помилка - зрозуміле пояснення і безпечний повтор.
5. Доступність за замовчуванням.'role = «progressbar»','aria-valuenow', live-регіони, контраст ≥ AA.

2) Типи індикаторів і коли їх використовувати

Лінійний прогрес (determinate/indeterminate). Завантаження/імпорт/експорт, кроки зі зрозумілим обсягом.
Круговий прогрес (зазвичай indeterminate). Короткі локальні операції в компактних місцях.
Степпер (покроковий). Послідовні етапи («Крок 2 з 4»), KYC, майстер-процеси.
Skeleton (скелетон-заглушки). Для підстановки структури контенту замість спінерів; уникайте «shimmer» для користувачів з'prefers-reduced-motion'.
Статус-бейджі (success/warning/danger/info). Стан об'єкта («В обробці», «Відхилено», «Готово»).
Банер/тост статусу. Глобальні події: офлайн, збій сервера, синхронізація черги.
Inline loader (кнопка/рядок). Локальні операції: «Збереження»..., «Відправлення»....

3) Певний vs невизначений прогрес

Determinate: відомий обсяг роботи → показуємо %/етапи.
Indeterminate: обсяг невідомий → «Йде обробка»... + контекст («Зазвичай до 1-2 хв»).
Зміна станів: можна почати з indeterminate → перейти до determinate, коли з'явиться оцінка.
ETA обережно: показуйте діапазон («~ 30-60 сек») і уникайте «обіцянок».

4) Розміщення та патерни

Локально до дії: кнопка'aria-busy', спінер в рядку таблиці, прогрес в картці.
Над блоком/списком: лінійний бар під хедером секції при пакетних операціях.
Глобально: верхній тонкий прогрес (route-change), системні банери.
Sticky-панель (моб.) : підтвердження/прогрес по CTA в нижньому доці.

5) Доступність (A11y)

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

Indeterminate: виставте'role = «progressbar»'без'aria-valuenow', додайте пояснюючий текст в'role = «status»'.
Лайв-регіони: 'aria-live = «polite»'для звичайних оновлень,'assertive'- тільки для критичних.
'aria-busy = «true»'на контейнері, який тимчасово блокований діями.
Фокус не «скаче»: при зміні етапу переміщайте фокус на заголовок кроку степпера.

6) Копірайтинг і візуальна семантика

Коротко і по справі: «Йде завантаження»..., «Обробляємо платіж»....
Додайте «що далі»: "Готово. Оновимо сторінку автоматично".
Кольори: зелений - успіх, помаранчевий - попередження/увага, червоний - помилка. Колір ≠ єдиний носій сенсу: дайте іконку/текст.

7) Оптимістичні оновлення та відкати

Оптимістика: змінюємо UI відразу (наприклад, позначка «В обраному») і тихо підтверджуємо сервером.
При помилці - м'який відкат + пояснення і'Retry'.
Критичні операції (ставка/платіж): опціонально «м'яка оптимістика» (фіксуємо «Відправлено → Очікуємо підтвердження»...), але без зміни грошового стану до підтвердження.

8) Черги та фонові завдання

Показуйте чергу: 'n'завдань в обробці, окремі картки з прогресом.
Дайте паузу/скасування для довгих операцій, якщо можливо.
Фонова обробка: бейдж «У фоні», тости по завершенні, розділ «Історія завдань».

9) Перформанс і таймінги

Перша реакція ≤ 100 мс: застосовуйте skeleton/inline-busy замість порожнечі.
Анімації: 120-180 мс (in), 80-140 мс (out), тільки'transform/opacity'.
Довгі процеси: оновлення прогресу не частіше 10-15 разів/сек; Групуйте зміни.

10) Сніппети

Локальний прогрес у кнопки

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

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>

Степпер

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 правильно

Використовуйте форму майбутнього контенту (картки/рядки), без нескінченного shimmer (або відключайте при'prefers-reduced-motion').
Межа часу: якщо завантаження> 300-500 мс, skeleton виправданий; при менших затримках достатньо «мікро-фейду».

12) Статус-бейджі (об'єктні стани)

Приклади: Чернетка, В обробці, Очікує підтвердження, Готово, Відхилено.

Короткий текст, стійкі кольори іконки/фону, контраст ≥ AA.
Іконка'aria-hidden =» true»'+ текстовий лейбл (для SR).
На клік - розкриваємо деталі або відкриваємо «Історію».

13) Специфіка iGaming

• Натискання CTA → «Відправлено»..., при затримці> 3 з - «Очікуємо підтвердження...» (indeterminate).
• Успіх - «Ставка прийнята» + чек; помилка - чесне пояснення («ринковий період закритий/коефіцієнт змінився») і безпечний Retry.

• Determinate за етапами: «Перевірка методу → Відправка → Підтвердження PSP».
• Для виведення - бейдж В обробці, екран статусу в профілі, ETA діапазоном; пуш по завершенні.

• Степпер реєстрації (кроки), прогрес до нагороди (N/очок), бейдж статусу «Бере участь».
• Реал-тайм оновлення - акуратно, без миготінь, з'aria-live = «polite»'.

• Степпер + бейдж «На перевірці». Показуйте, що вже прийнято (галочка) і що залишилося.

14) Кольори, контраст і текст

Success/Info/Warning/Danger - чотири стійких тони в дизайн-системі.
Контраст тексту до фону бейджа ≥ AA.
Не використовуйте один і той же колір для «в обробці» і «попередження».

15) Метрики

Time-to-First-Feedback (TTFF): від кліка до першого візуального відгуку.
Completion Time за операціями і drop/abort rate для довгих завдань.
Retry success rate для операцій з прогресом.
% оптимістик, що завершилися успішно (і частка відкатів).
Visible time skeleton/spinner (цель: якомога менше).

16) Анти-патерни

«Німа» кнопка (немає busy/спінера)> 100 мс.
Нескінченні спінери без пояснення та альтернативи.
Помилкові відсотки/повзунок, завислий на 99%.
Скидання контенту при помилці без можливості повторити.
Тільки колір без тексту/іконок для статусу.
Прогрес далеко від місця дії (користувач не бачить).

17) Токени дизайн-системи (приклад)

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-чек-лист

Відгук і чесність

• TTFF ≤ 100 мс; є локальний busy/skeleton.
• Determinate - реальний%; indeterminate - з поясненням.

Доступність

• 'role = «progressbar» '/' aria-valuenow'коректні; live-регіони на оновленнях.
• Контраст бейджів/тексту ≥ AA; колір не єдиний носій сенсу.

Поведінка

• Оптимістика з коректним відкатом і поясненням.
• Черги відображаються; є скасування/пауза (якщо застосовується).
• Прогрес поруч з місцем дії, не перекриває CTA.

Перформанс

• Оновлення не частіше 10-15 разів/сек; анімації'transform/opacity'.
• Skeleton не дражнить shimmer'ом при'reduce-motion'.

Тексти

• Коротко, без техжаргону; «що далі» після завершення.
• Без «обіцянок» точного часу, якщо воно не гарантується.

19) Документація в дизайн-системі

Компоненти: `ProgressBar`, `ProgressCircle`, `Stepper`, `StatusBadge`, `InlineLoader`, `Skeleton`.
Правила вибору типу, копірайтинг і кольору для статусів.
Патерни: оптимістика, черги, фонова обробка, оффлайн-синхронізація.
Do/Don't-галерея: «вічний спінер», помилкові відсотки, «німий» CTA vs хороший TTFF.

Коротке резюме

Індикатори прогресу і статусів повинні давати своєчасний, чесний і доступний зворотний зв'язок. Розміщуйте їх поруч з дією, розрізняйте певний і невизначений прогрес, поважайте a11y і не зловживайте анімаціями. У iGaming це особливо важливо для ставок, платежів, турнірів і KYC - спокійний, передбачуваний прогрес безпосередньо підвищує довіру і конверсію.