进度和状态指标

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特别重要--平静、可预测的进步直接提高了信心和转换。