進度和狀態指標

1）原則

1.即時響應（≤ 100毫秒）。任何動作都會在視覺上立即確認：按→ 'busy'/骨架/微動畫。
2.誠實和可預測性。利息反映了實際進展，而不是「永恒的99%」。如果無法進行評估-請使用未定義的變體和說明。
3.動作旁邊的上下文。指示燈在用戶觀察/操作的地方（按鈕、卡片、塊）而不是遠角。
4.成功後的不起眼。成功是短暫的支票/假發和一切。錯誤-可以理解的解釋和安全重復。
5.默認可用性。'role='progressbar'，'aria-valuenow'，實時區域，AA ≥對比。

2）指標類型及何時使用

線性進展（確定性/不確定性）。下載/進口/導出,可理解的步驟。
循環進展（通常為indeterminate）。在緊湊位置進行短暫的本地操作。
Stepper（回合）。連續階段（「步驟2 of 4」），KYC，主流程。
Skeleton（骨架存根）。替換內容結構而不是旋轉器；對於具有「預處理動作」的用戶，避免使用「shimmer」。
狀態徽章（success/warning/danger/info）。物件狀態（「處理」、「拒絕」、「完成」）。
橫幅/狀態敬酒。全局事件：離線、服務器故障、隊列同步。

Inline loader（按鈕/字符串）。本地操作： 「Save……」，「發送……」

3）確定的vs不確定的進展

確定：已知工作量→顯示%/階段。
Indeterminate：音量未知→「正在處理……+上下文」（「通常高達1-2分鐘」）。
狀態更改：您可以從indeterminate開始→當評估出現時切換到確定性。
ETA謹慎：顯示範圍（「~ 30-60秒」），避免「承諾」。

4）住宿和模式

本地到動作：「aria-busy」按鈕,表列中的旋轉器,卡片中的進度。
在單元/列表上方：批處理操作中段頭下方的線條。
全球：上微妙進步（路線變化），系統橫幅。
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'中添加解釋性文本。
Live區域："aria-live="polite"用於常規更新，"assertive"僅用於關鍵更新。
"aria-busy="true"在容器上，該容器被操作暫時阻止。
焦點不是「跳躍」：當舞臺改變時，將焦點移至步進步頭。

6）文案寫作和視覺語義

簡而言之，在案件中：「正在下載……」，「我們處理付款……」。

添加"接下來要做的事情"： "完成。讓我們自動更新頁面。"

顏色：綠色是成功的，橙色是警告/註意，紅色是錯誤。顏色≠唯一的意義載體：給圖標/文本。

7）樂觀更新和回滾

樂觀主義者：我們立即更改UI（例如「收藏夾」標記），並由服務器悄悄確認。
錯誤時-軟回滾+解釋和「Retry」。
關鍵交易（利率/付款）：可選的「軟樂觀主義者」（通過「發送→等待確認……」固定），但在確認之前不更改貨幣狀態。

8）隊列和背景任務

顯示隊列：「n」處理中的任務，單獨的進度卡。
如果可能的話，暫停或取消長時間手術。
背景處理：「在背景中」徽章，完成後敬酒，「任務歷史」部分。

9）表演和計時

第一種反應≤ 100毫秒：應用skeleton/inline-busy代替空白。
動畫：120-180毫秒（in），80-140毫秒（out），僅「轉換/opacity」。
冗長的過程：每秒不超過10至15次；分組更改。

10）Snippets

按鈕上的本地進度

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>

線性確定性

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毫秒,skeleton是合理的；較小的延遲就足夠了「微型假」。

12）狀態徽章（對象狀態）

示例： 草稿,處理,等待確認,完成,拒絕.

短文本，圖標/背景的穩定顏色，≥ AA的對比度。
圖標'aria-hidden=」true」'+文本標簽（對於SR）。
單擊-顯示詳細信息或打開「歷史」。

13） iGaming的細節

• 按CTA →「發送」……，延遲時>3 s-「等待確認……」(indeterminate).
• 成功-「接受率」+支票；錯誤-誠實的解釋（「市場周期關閉/系數變化」）和安全的回歸。

• 按階段確定：「驗證方法→提交→確認PSP。」
• 對於輸出-處理中的徽章，配置文件中的狀態屏幕，ETA範圍；完成後。

• Stepper註冊（步驟），進步到獎項（N/積分），徽章狀態「參與」。
• Real Time更新-整潔，無閃爍，帶有'aria-live='polite'。

KYC:

Stepper+徽章「在檢查中」。顯示已經接受的東西（勾選）和剩下的東西。

14）顏色、對比度和文字

Success/Info/Warning/Danger-設計系統中的四個穩定色調。
文本與徽章背景的對比≥ AA。
不要將相同的顏色用於「處理」和「警告」。

15）度量標準

時間到第一饋送（TTFF）：從點擊到第一次視覺響應。
按操作完成時間,以及長任務的drop/abort rate。
Retry success rate用於進度操作。
成功完成的樂觀主義者的百分比（以及回扣比例）。
Visible time skeleton/spinner（目標：盡可能少）。

16）反模式

「無聲」按鈕（無busy/spinner）> 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。
• 確定性-實際百分比；indeterminate-附有說明。

可用性

• 'role=「progressbar」 「/'aria-valuenow」是正確的；更新中的實時區域。
• AA ≥徽章/文本的對比；顏色不是唯一的意義載體。

行為

• 樂觀主義者有正確的回滾和解釋。
• 隊列顯示；有取消/暫停（如適用）。
• 在行動地點附近的進展並不與CTA重疊。

表演

• 更新最多10至15次/秒；「轉換/操作」動畫。
• Skeleton不會在「reduce-motion」中取笑shimmer'om。

文本

• 簡而言之，沒有tehargon；完成後「接下來會發生什麼」。
• 沒有確切時間的「承諾」，除非得到保證。

19）設計系統中的文檔

Компоненты: `ProgressBar`, `ProgressCircle`, `Stepper`, `StatusBadge`, `InlineLoader`, `Skeleton`.

狀態的類型，文案和顏色選擇規則。
模式：樂觀，隊列，背景處理，離線同步。
Do/Do n't畫廊：「永恒的旋轉器」，假利息，「靜音」CTA vs好的TTFF。

簡短摘要

進度和狀態指標應提供及時、誠實和可訪問的反饋。將它們放在動作旁邊，區分特定和不確定的進展，尊重a11 y，不要濫用動畫。在iGaming中，這對於投註、支付、錦標賽和KYC特別重要--平靜、可預測的進步直接提高了信心和轉換。