Прогресстин жана статустун көрсөткүчтөрү

1) Принциптер

1. Заматта жооп (≤ 100 ms). Ар кандай иш-аракет дароо визуалдык тастыкталат: → 'busy '/скелет/микроанимация басуу.
2. Чынчылдык жана алдын ала айтуу. Пайыздар "түбөлүк 99%" эмес, реалдуу прогрессти чагылдырат. Эгерде баа берүү мүмкүн болбосо, анда аныкталбаган (indeterminate) вариантты жана түшүндүрмөнү колдонуңуз.
3. иш-аракеттердин жанында контекст. Колдонуучу карап/иш-аракет кылган жерде индикатор (баскычы, карта, блок) эмес, алыскы бурчта.
4. Ийгиликтен кийин көрүнбөстүк. Ийгилик - кыска чек/фейд жана башкалар. Ката - түшүнүктүү түшүндүрмө жана коопсуз кайталоо.
5. Демейки жеткиликтүүлүгү. 'role = "progressbar"', 'aria-valuenow', live-региондор, контраст ≥ AA.

2) Индикаторлордун түрлөрү жана аларды качан колдонуу керек

Сызыктуу прогресс (determinate/indeterminate). Жүктөө/импорт/экспорт, түшүнүктүү көлөмү менен кадамдар.
тегерек прогресс (адатта indeterminate). Кыска компакт жерлерде жергиликтүү иш.
Stepper (кадам). ырааттуу этаптары ("2-кадам 4"), KYC, мастер-процесстер.
Skeleton (skeleton штепсель). Спиннерлердин ордуна мазмундун структурасын алмаштыруу үчүн; 'prefers-reduced-motion' менен колдонуучулар үчүн "shimmer" алыс.
Статус-төш белгилер (success/warning/danger/info). Объекттин абалы ("Иштетүүдө", "Четке кагылды", "Даяр").
Баннер/тост статусу. Глобалдык окуялар: оффлайн, сервердин бузулушу, кезек синхрондоштуруу.
Inline Loader (баскыч/сап). Жергиликтүү операциялар: "Сактоо"..., "Жөнөтүү"....

3) Белгилүү vs белгисиз прогресс

Determinate: белгилүү иш көлөмү → %/этаптары көрсөтүү.
Indeterminate: көлөмү белгисиз → "иштеп жатат"... + контексти ("Адатта 1-2 мин").
Services өзгөртүү: indeterminate → баа пайда болгондо determinate өтүү менен баштаса болот.
ETA этияттык менен: диапазонун көрсөтүү ("~ 30-60 сек") жана "убада" качуу.

4) жайгаштыруу жана үлгүлөрү

Жергиликтүү иш-аракет үчүн: баскычы 'aria-busy', стол сапта spinner, карта прогресс.
Блок/тизменин үстүндө: пакеттик операцияларда секциянын хедери астында сызыктуу бар.
Global: жогорку жука прогресс (route-change), системалык баннерлер.
Sticky Panel : төмөнкү докто 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 '' дегенге кошуңуз.
Live региондор: 'aria-live = "polite"' кадимки жаңылануулар үчүн, 'assertive' - критикалык гана.
'aria-busy =' true 'иш-аракеттер менен убактылуу бөгөттөлгөн контейнерде.
Фокус "секирип" кетпейт: этап өзгөргөндө, фокусту степпер этабынын аталышына жылдырыңыз.

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

Кыска жана иш боюнча: "Жүктөө бар"..., "Төлөмдү иштеп чыгуу"....
Кошуу "кийинки": "Даяр. Баракты автоматтык түрдө жаңыртабыз".
Түстөр: жашыл - ийгилик, кызгылт сары - эскертүү/көңүл буруу, кызыл - ката. түс ≠ мааниси гана алып жүрүүчү: сөлөкөт/текст бер.

7) Оптимисттик жаңыртуулар жана кайтарымдар

Оптимизм: Биз дароо UI өзгөртүп (мисалы, "Сүйүктүү" деген белги) жана акырын Server тастыктайт.
ката - жумшак артка + түшүндүрмө жана 'Retry'.
Критикалык операциялар (коюм/төлөм): кошумча "жумшак оптимизм" ("Жөнөтүлдү → Тастыктоону күтөбүз"...), бирок тастыкталганга чейин акчалай абалын өзгөртпөстөн.

8) Кезектер жана фон милдеттери

Кезекти көрсөтүңүз: иштетүүдөгү 'n' милдеттери, прогресс менен жеке карталар.
Мүмкүн болсо, узак операциялар үчүн тыныгуу/жокко чыгаруу.
Фонду иштетүү: "Фонда" төш белгиси, аяктагандан кийин тосттор, "Милдеттердин тарыхы" бөлүмү.

9) Аткаруу жана таймингдер

Биринчи жооп ≤ 100 ms: бош ордуна 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>

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 туура

Келечектеги мазмундун формасын (карталар/саптар) чексиз shimmer жок колдонуңуз (же 'prefers-reduced-motion' менен өчүрүңүз).
Убакыт чеги: жүктөө> 300-500 ms болсо, skeleton акталган; "микро-фейд" жетиштүү.

12) Статус-төш белгилер (объекттик шарттар)

Мисалдар: Долбоор, иштетүү, ырастоо күтүп, даяр, четке кагылды.

Кыска текст, туруктуу сөлөкөт/фон түстөр, контраст ≥ AA.
Сөлөкөтү' aria-hidden =" true"' + текст белги (SR үчүн).
чыкылдатуу - майда-чүйдөсүнө чейин ачып же "Тарых" ачып.

13) iGaming өзгөчөлүктөрү

• CTA басуу → "Жөнөттү"..., кечигип жатканда> 3 с - "Тастыктоону күтөбүз..." (indeterminate).
• Ийгилик - "Коюм кабыл алынды" + чек; ката - чынчыл түшүндүрмө ("рыноктук мезгил жабык/чен өзгөргөн") жана коопсуз Retry.

• этаптарында Determinate: "Текшерүү ыкмасы → жөнөтүү → PSP ырастоо".
• Чыгаруу үчүн - бейдж иштетүү, профилдеги статус экраны, ETA диапазону; аяктагандан кийин.

• Stepper каттоо (кадамдар), сыйлыкка прогресс (N/упай), "катышат" статусун төш белгиси.
• Реалдуу убакыт жаңыртуу - кылдаттык менен, эч кандай жарк эткен, менен 'aria-live = "polite"'.

• Stepper + төш белги "текшерүү". Буга чейин кабыл алынганын (белги) жана эмне калганын көрсөтүңүз.

14) Түстөр, контраст жана текст

Success/Info/Warning/Danger - дизайн системасында төрт туруктуу тон.
АА ≥ белгисинин фонуна тексттин карама-каршылыгы.
"Иштетүүдө" жана "эскертүү" үчүн бир түстү колдонбоңуз.

15) Метрика

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

16) Анти-үлгүлөрү

"Тилсиз" баскычы (эч кандай busy/spinner)> 100 ms.
Чексиз Spinner эч кандай түшүндүрмө жана альтернатива.
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 жаап жок.

Аткаруу

• Updates 10-15 эсе көп эмес/сек; 'transform/opacity' анимациялары.
• Skeleton 'reduce-motion' менен шиммер менен шылдыңдабайт.

Тексттер

• Кыска, техникалык жаргон жок; аяктагандан кийин "мындан ары эмне болот".
• кепилдик жок болсо, так убакыт "убада" жок.

19) Дизайн системасында документтер

Компоненты: `ProgressBar`, `ProgressCircle`, `Stepper`, `StatusBadge`, `InlineLoader`, `Skeleton`.
түрлөрүн тандоо эрежелери, копирайтинг жана статус үчүн түстөр.
Үлгүлөр: оптимизм, кезек, арткы иштетүү, оффлайн синхрондоштуруу.
Do/Don 't-галерея: "түбөлүк spinner", жалган пайыздар, "тилсиз" CTA vs жакшы TTFF.

Кыскача резюме

Прогресстин жана статустун көрсөткүчтөрү өз убагында, чынчыл жана жеткиликтүү пикир бериши керек. Аларды иш-аракеттердин жанына жайгаштырыңыз, белгилүү жана белгисиз прогрессти айырмалаңыз, a11y сыйлаңыз жана анимацияларды кыянаттык менен пайдаланбаңыз. iGaming бул коюмдарды, төлөмдөрдү, турнирлерди жана KYC үчүн өзгөчө маанилүү болуп саналат - тынч, алдын ала прогресс түздөн-түз ишеним жана конверсия жогорулатат.