Ösüş we status görkezijileri

1) Ýörelgeler

1. Derrew jogap (≤ 100 ms). Islendik hereket derrew wizual tassyklanýar: → 'busy '/skelet/mikroanimasiýa.
2. Dogruçyllyk we öňünden aýdylmak. Göterim "baky 99%" däl-de, hakyky ösüşi görkezýär. Eger baha bermek mümkin bolmasa, onda kesgitlenmedik (indeterminate) warianty we düşündirişi ulanyň.
3. Hereketiň gapdalyndaky kontekst. Ulanyjynyň gözleýän/hereket edýän ýerinde görkeziji (düwme, kartoçka, blok), uzak burçda däl.
4. Üstünlikden soň görünmezlik. Üstünlik - gysga çek/galp we hut şu. Ýalňyşlyk - düşnükli düşündiriş we howpsuz gaýtalamak.
5. Variant elýeterliligi. 'role = "progressbar"', 'aria-valuenow', live-regions, kontrast ≥ AA.

2) Görkezijileriň görnüşleri we olary haçan ulanmak

Çyzykly ösüş (determinate/indeterminate). Ýüklemek/import/eksport, düşnükli göwrümli ädimler.
Tegelek ösüş (adatça indeterminate). Ykjam ýerlerde gysga lokal amallar.
Stepper (ädimme-ädim). Yzygiderli tapgyrlar ("4-den 2-nji ädim"), KYC, ussat amallar.
Skeleton. Spinnerleriň ýerine mazmunyň gurluşyny çalyşmak üçin; 'prefers-reduced-motion' bilen ulanyjylar üçin "shimmer" -den gaça duruň.
Status nyşanlary (success/warning/danger/info). Obýektiň ýagdaýy ("Işlenýär", "Ret edildi", "Taýýar").
Status banneri/tosty. Global wakalar: awtonom, serwer şowsuzlygy, nobat senkronizasiýasy.
Inline ýükleýji (düwme/setir). Lokal amallar: "Saklamak"..., "Ibermek"....

3) Kesgitlenen vs näbelli ösüş

Determinate: işiň göwrümi belli → %/tapgyrlary görkezýäris.
Indeterminate: göwrümi belli däl → "Bejeriş işleri dowam edýär"... + kontekst ("Adatça 1-2 minuta çenli").
Ýagdaýlary üýtgetmek: indeterminate → -dan başlap, baha berlende determinate geçip bilersiňiz.
ETA seresap boluň: aralygy görkeziň ("~ 30-60 sek") we "wadalardan" gaça duruň.

4) Ýerleşdirmek we patternler

Hereket etmek üçin lokal: 'aria-busy' düwmesi, tablisanyň hataryndaky spinner, kartoçkadaky ösüş.
Blokyň/sanawyň üstünde: paket amallarynda bölümiň hederiniň aşagyndaky çyzykly bar.
Global: ýokarky inçe ösüş (route-change), ulgam bannerleri.
Sticky panel : aşaky dokda CTA boýunça tassyklama/ösüş.

5) Elýeterlilik (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 '-y goýuň, düşündiriş tekstini' role = 'status' -a goşuň.
Durmuş sebitleri: 'aria-live = "polite"' adaty täzelenmeler üçin, 'assertive' - diňe kritikler üçin.
'aria-busy =' true 'hereketleri bilen wagtlaýyn petiklenen konteýnerde.
Fokus "bökmeýär": basgançagy üýtgedeniňizde, ünsi ädimiň sözbaşysyna geçiriň.

6) Göçürmek we wizual semantika

Gysgaça we iş boýunça: "Ýüklemek dowam edýär"..., "Tölegi gaýtadan işleýäris"....
"Indiki" goşuň: "Taýýar. Sahypany awtomatiki täzeläris".
Reňkler: ýaşyl - üstünlik, mämişi - duýduryş/üns, gyzyl - ýalňyşlyk. Reňk ≠ manynyň ýeke-täk göterijisi: nyşany/teksti beriň.

7) Optimistik täzelenmeler we yzyna gaýtarmalar

Optimizm: UI-ni birbada üýtgedýäris (mysal üçin "Saýlanan" belligi) we serwer bilen ýuwaşlyk bilen tassyklaýarys.
Ýalňyşlyk ýüze çyksa - ýumşak yza gaýdyp gelmek + düşündiriş we 'Retry'.
Möhüm amallar (stawka/töleg): goşmaça "ýumşak optimizm" ("Iberildi → Tassyklamagyna garaşýarys"...), ýöne tassyklanýança pul ýagdaýyny üýtgetmezden.

8) Nobatlar we fon meseleleri

Nobatyňyzy görkeziň: 'n' iş, aýry-aýry kartoçkalar.
Mümkin bolsa, uzak amallar üçin arakesme/ýatyryş beriň.
Fon taýdan gaýtadan işlemek: "Fonda" nyşany, tamamlanandan soň tostlar, "Meseleleriň taryhy" bölümi.

9) Çykyş we taýmingler

Ilkinji reaksiýa ≤ 100 ms: boşlugyň ýerine skeleton/inline-busy ulanyň.
Animasiýalar: 120-180 ms (in), 80-140 ms (out), diňe 'transform/opacity'.
Uzyn prosesler: ösüşiň täzelenmegi sekuntda 10-15 gezekden köp bolmaly däldir; üýtgeşmeleri toparlanyň.

10) Snippetler

Düwmede ýerli ösüş

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>

Çyzykly 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 dogry

Geljekdäki mazmunyň görnüşini (kartoçkalar/setirler) tükeniksiz ulanyň (ýa-da 'prefers-reduced-motion' -da öçüriň).
Wagt çäkleri: eger ýüklense> 300-500 ms, skeleton dogry; gijikdirmeler az bolsa, "mikro-fade" ýeterlikdir.

12) Status-nyşanlar (obýekt ýagdaýlary)

Mysallar: Taslama, Gaýtadan işlemekde, Tassyklamalara garaşýar, Taýýar, Ret edildi.

Gysga tekst, durnukly nyşan/fon reňkleri, kontrast ≥ AA.
Nyşan' aria-hidden =" true"' + tekst belligi (SR üçin).
Basmak - jikme-jiklikleri açýarys ýa-da "Taryh" açýarys.

13) iGaming aýratynlyklary

• CTA basmak → "Iberildi"..., gijikdirilende> 3 s - "Tassyklamaga garaşýarys..." (indeterminate).
• Üstünlik - "Stawka kabul edildi" + çek; ýalňyşlyk - dogruçyl düşündiriş ("bazar döwri ýapyk/koeffisiýent üýtgedi") we howpsuz Retry.

• Tapgyrlar boýunça determinate: "Usuly barlamak → Ibermek → PSP tassyklamak".
• Çykyş üçin - nyşan Işlenen, profildäki status ekrany, ETA diapazony; iş gutarandan soň.

• Step hasaba alyş (ädimler), baýraga çenli ösüş (N/äýnek), "Gatnaşýar" statusynyň nyşany.
• Real-time täzelenmesi - seresaplylyk bilen, yşyksyz, c 'aria-live = "polite"'.

• Stepper + "Barlamak üçin" nyşany. Eýýäm kabul edilen we galan zatlary görkeziň.

14) Reňkler, kontrast we tekst

Success/Info/Warning/Danger - dizaýn ulgamynda dört durnukly äheň.
Nyşanyň aňyrsyna garşy tekst ≥ AA.
"Işlemekde" we "duýduryş" üçin birmeňzeş reňk ulanmaň.

15) Metrikler

Time-to-First-Feedback (TTFF): basmakdan ilkinji wizual seslenmä çenli.
Amallar boýunça Completion Time we uzyn meseleler üçin drop/abort rate.
Ösüş amallary üçin retry success rate.
Üstünlikli tamamlanan optimistik% (we yzyna gaýtarmagyň paýy).
Visible time skeleton/spinner (maksat: mümkin boldugyça az).

16) Anti-patternler

"Dilsiz" düwme (busy/spinner ýok)> 100 ms.
Düşündirişsiz we alternatiwasyz tükeniksiz spinner.
99% asylan ýalan göterim/slaýd.
Gaýtalamak mümkinçiligi bolmazdan mazmuny taşlaň.
Diňe status üçin tekst/nyşansyz reňk.
Hereket edilýän ýerinden uzakda (ulanyjy görmeýär).

17) Dizaýn-ulgamyň bellikleri (mysal)

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-çek-sanawy

Jogap we dogruçyllyk

• TTFF ≤ 100 ms; lokal busy/skeleton bar.
• Determinate - hakyky%; indeterminate - düşündiriş bilen.

Elýeterlilik

• 'role = "progressbar" '/' aria-valuenow' dogry; täzelenmelerde live-sebitler.
• Nyşanlaryň/tekstiň kontrasty ≥ AA; reňk ýeke-täk many göteriji däl.

Özüni alyp barşy

• Dogry jogap we düşündiriş bilen optimizm.
• Nobatlar görkezilýär; ýok/arakesme bar (mümkin bolsa).
• Hereket edilýän ýeriň golaýyndaky ösüş, CTA-ny ýapmaýar.

Çykyş

• Täzelenmeler sekuntda 10-15 gezekden köp bolmaly däldir; animasiýa 'transform/opacity'.
• Skeleton 'reduce-motion' -da shimmer '-ni masgaralamaýar.

Tekstler

• Gysgaça, tehniki jargonsyz; tamamlanandan soň "indiki näme".
• Eger kepillendirilmedik bolsa, takyk wagtyň "wadasyz".

19) Dizaýn-ulgamdaky resminamalar

Компоненты: `ProgressBar`, `ProgressCircle`, `Stepper`, `StatusBadge`, `InlineLoader`, `Skeleton`.
Statuslar üçin görnüşi, göçürmäni we reňkleri saýlamagyň düzgünleri.
Nagyşlar: optimizm, nobatlar, fon gaýtadan işlemek, awtonom sinhronizasiýa.
Do/Don 't-galereýa: "baky spinner", ýalan göterim, "dilsiz" CTA vs gowy TTFF.

Gysgaça gysgaça

Ösüş we status görkezijileri öz wagtynda, dogruçyl we elýeterli seslenme bermeli. Olary hereketiň gapdalynda goýuň, belli bir we näbelli ösüşi tapawutlandyryň, a11y hormat goýuň we animasiýalary hyýanatçylykly ulanmaň. "iGaming" -de bu jedeller, tölegler, ýaryşlar we KYC üçin aýratyn möhümdir - asuda, öňünden aýdyp boljak ösüş ynamy we öwrülişigi gönüden-göni ýokarlandyrýar.