Progress va maqom indikatorlari

1) Qonunning

1. Tezkor javob (100 ms ≤). Har qanday harakat darhol vizual tarzda tasdiqlanadi: →’busy ’/skelet/mikromandatsiya.
2. Halollik va bashorat qilish mumkin. Foizlar «abadiy 99%» emas, balki real taraqqiyotni aks ettiradi. Agar baholash mumkin bo’lmasa, aniqlanmagan (indeterminate) variant va tushuntirishdan foydalaning.
3. Amalga yaqin kontekst. Indikator foydalanuvchi ko’rayotgan/harakat qiladigan joyda (tugma, kartochka, blok).
4. Muvaffaqiyatdan keyin ko’rinmaslik. Muvaffaqiyat - qisqa chek/soxta va shu. Xato - tushunarli tushuntirish va xavfsiz takrorlash.
5. Andoza foydalanish.’role =’progressbar’,’aria-valuenow’, live-regionlar, kontrast ≥ AA.

2) Indikatorlarning turlari va ulardan qachon foydalanish

Chiziqli progress (determinate/indeterminate). Yuklash/import/eksport, tushunarli hajmdagi qadamlar.
Doiraviy taraqqiyot (odatda indeterminate). Ixcham joylarda qisqa lokal operatsiyalar.
Stepper (qadam). Ketma-ket bosqichlar («4 dan 2 qadam»), KYC, master-jarayonlar.
Skeleton (skeleton-zaplushki). Spinnerlar o’rniga kontent tuzilishini almashtirish uchun; ’prefers-reduced-motion’ bilan foydalanuvchilar uchun «shimmer» dan qoching.
Maqom nishonchalari (success/warning/danger/info). Obyekt holati («Qayta ishlashda», «Rad etildi», «Tayyor»).
Maqom banneri/tosti. Global voqealar: oflayn, server muvaffaqiyatsiz tugadi, navbat sinxronizatsiyasi.
Inline loader (tugma/satr). Lokal operatsiyalar: «Saqlash»..., «Jo’natish»....

3) Muayyan va noaniq taraqqiyot

Determinate: ish hajmi maʼlum → %/bosqichlar koʻrsatilmoqda.
Indeterminate: hajmi noma’lum → «Qayta ishlanmoqda»... + kontekst («Odatda 1-2 daqiqagacha»).
Holat oʻzgarishi: siz indeterminate → dan boshlashingiz mumkin.
ETA ehtiyotkorlik bilan: diapazonni ko’rsating («~ 30-60 sek») va «va’dalardan» qoching.

4) Joylashtirish va patternlar

Lokal:’aria-busy’tugmasi, jadval qatoridagi spinner, kartadagi taraqqiyot.
Blok/ro’yxat ustida: paketli operatsiyalarda bo’lim xederi ostidagi chiziqli bar.
Global: yuqori nozik taraqqiyot (route-change), tizim bannerlari.
Sticky panel : pastki dokda CTA bo’yicha tasdiqlash/progress.

5) Foydalanish imkoniyati (A11y)

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

Indeterminate:’role =’progressbar’’siz’aria-valuenow’qo’ying, tushuntiruvchi matnni’role =’status’’ga qo’shing.
Hayot mintaqalari:’aria-live =’polite’oddiy yangilanishlar uchun,’assertive’faqat tanqidiy yangilanishlar uchun.
’aria-busy =’ true’amallar bilan vaqtincha bloklangan konteynerda.
Fokus «sakramaydi»: bosqichni oʻzgartirayotganda fokusni stepper qadami sarlavhasiga koʻchiring.

6) Nusxa ko’chirish va vizual semantika

Qisqacha va ish bo’yicha: «Yuklanmoqda»..., «To’lovni qayta ishlayapmiz»....
"Keyingi nima" qo’shing: "Tugadi. Sahifani avtomatik ravishda yangilaymiz".
Ranglar: yashil - muvaffaqiyat, to’q sariq - ogohlantirish/e’tibor, qizil - xato. Rang ≠ maʼnoning yagona manbai: ikona/matn bering.

7) Optimistik yangilanishlar va qaytishlar

Optimistika: Biz darhol UIni o’zgartiramiz (masalan, «Tanlanganlarda») va uni server orqali jimgina tasdiqlaymiz.
Xato - yumshoq orqaga qaytish + tushuntirish va’Retry’.
Tanqidiy operatsiyalar (stavka/to’lov): ixtiyoriy ravishda «yumshoq optimistika» («Jo’natildi → Tasdiqlashni kutmoqdamiz»...), lekin tasdiqlangunga qadar pul holatini o’zgartirmasdan.

8) Navbatlar va fon vazifalari

Navbatni koʻrsating:’n’vazifalar, alohida kartochkalar.
Iloji boʻlsa, uzoq operatsiyalar uchun tanaffus/bekor qilish.
Fonga ishlov berish: «Fonda» nishoni, tugallangan tostlar, «Vazifalar tarixi» bo’limi.

9) Spektakl va tayminglar

Birinchi reaksiya ≤ 100 ms: bo’shliq o’rniga skeleton/inline-busy qo’llang.
Animatsiyalar: 120-180 ms (in), 80-140 ms (out), faqat’transform/opacity’.
Uzoq jarayonlar: taraqqiyotni kamida 10-15 marta yangilash; oʻzgarishlarni guruhlang.

10) Snippetlar

Tugmada lokal taraqqiyot

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>

Chiziqli 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 to’g "ri

Cheksiz shimmersiz (yoki’prefers-reduced-motion’bilan oʻchiring) boʻlajak kontent shaklidan foydalaning.
Vaqt chegarasi: agar yuklash> 300-500 ms boʻlsa, skeleton oqlanadi; kamroq kechikishlarda «mikro-feyd» yetarli.

12) Maqom-bayroqlar (obyekt holatlari)

Misollar: Loyihalash, Qayta ishlash, Tasdiqlashni kutish, Tayyor, Rad etilgan.

Qisqa matn, barqaror piktogramma/fon ranglari, kontrast ≥ AA.
’aria-hidden =’ true’+ matnli yorliq (SR uchun).
Bosish - tafsilotlarni ochish yoki «Tarix» ni ochish.

13) iGaming xususiyatlari

• CTA → «Joʻnatildi»..., kechiktirilganda> 3 s - «Tasdiqlashni kutmoqdamiz...» (indeterminate).
• Muvaffaqiyat - «Stavka qabul qilindi» + chek; xato - halol tushuntirish («bozor davri yopiq/koeffitsiyent o’zgargan») va xavfsiz Retry.

• Bosqichlar bo’yicha determinate: «Usulni tekshirish → Jo’natish → PSP tasdiqlash».
• Chiqish uchun - bayj V ishlov berish, profildagi maqom ekrani, ETA diapazoni; tugagach push.

• Ro’yxatdan o’tish (qadamlar), mukofotgacha (N/ko’zoynak) taraqqiyot, «Ishtirok etadi» maqomi nishoni.
• Real-time yangilanish - ehtiyotkorlik bilan, miltillamasdan, s’aria-live = «polite»’.

• Step + «Tekshiruvda» nishoni. Allaqachon qabul qilingan va qolgan narsalarni koʻrsating.

14) Ranglar, kontrast va matn

Success/Info/Warning/Danger - dizayn tizimida to’rtta barqaror ohang.

Matn kontrasti ≥ AA nishonchasi foniga

«Ishlov berish» va «ogohlantirish» uchun bir xil rangdan foydalanmang.

15) Metrika

Time-to-First-Feedback (TTFF): bosishdan birinchi vizual javobgacha.
Completion Time operatsiya va drop/abort rate uzoq vazifalar uchun.
Progressiv operatsiyalar uchun retry success rate.
Muvaffaqiyatli yakunlangan% optimistik (va qaytarish ulushi).
Visible time skeleton/spinner (maqsad: iloji boricha kichik).

16) Anti-patternlar

«Tilsiz» tugma (busy/spinner yoʻq)> 100 ms.
Tushuntirishsiz cheksiz spinnerlar.
Yolg’on foizlar/99% osilgan slayd.
Xato boʻlganda tarkibni qayta tiklash.
Faqat maqom uchun matn/piktogrammalarsiz rang.
Harakat joyidan uzoq (foydalanuvchi koʻrmaydi).

17) Dizayn-tizim tokenlari (misol)

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-chek-varaq

Javob va halollik

• TTFF ≤ 100 ms; mahalliy busy/skeleton mavjud.
• Determinate - haqiqiy%; indeterminate - tushuntirish bilan.

Foydalanish imkoniyati

• ’role = «progressbar» ’/’ aria-valuenow’toʻgʻri; yangilanishlarda live-hududlar.
• Nishonlar/matn kontrastlari ≥ AA; rang maʼnoning yagona manbai emas.

Xulq-atvori

• To’g’ri rad etish va tushuntirish bilan optimistik.
• Navbatlar ko’rsatiladi; bekor qilish/pauza (agar mumkin boʻlsa).
• Harakat joyi yaqinidagi taraqqiyot CTAni yopmaydi.

Spektakl

• Yangilanishlar sekundiga 10-15 martadan ko’p emas; ’transform/opacity’ animatsiyalari.
• Skeleton’reduce-motion’da shimmer’bilan masxara qilmaydi.

Matnlar

• Qisqa, texnik jargonsiz; tugagandan keyin «keyingi nima».
• Agar kafolatlanmagan boʻlsa, aniq vaqtning «vaʼdalarisiz».

19) Dizayn-tizimdagi hujjatlar

Компоненты: `ProgressBar`, `ProgressCircle`, `Stepper`, `StatusBadge`, `InlineLoader`, `Skeleton`.
Maqom uchun turni, nusxa ko’chirishni va ranglarni tanlash qoidalari.
Patternlar: optimistika, navbatlar, fon ishlov berish, oflayn sinxronlashtirish.
Do/Don’t-galereyasi: «abadiy spinner», soxta foizlar, «soqov» CTA vs yaxshi TTFF.

Qisqacha xulosa

Taraqqiyot va maqom indikatorlari oʻz vaqtida, halol va arzon fikr-mulohaza bildirishi kerak. Ularni harakatning yoniga joylashtiring, aniq va noaniq yutuqlarni ajrating, a11y ga hurmat qiling va animatsiyalarni suiiste’mol qilmang. iGamingda bu, ayniqsa, stavkalar, toʻlovlar, turnirlar va KYC uchun juda muhimdir - xotirjam, oldindan aytib boʻladigan taraqqiyot bevosita ishonch va konversiyani oshiradi.