Progress 进度条
线性与环形两种形态，含状态色与流动条纹。
线性进度条
60%
0%
vue
<SrProgress :percentage="60" />状态色
status 覆盖默认配色。不传时按百分比自动派生： 100% 变成功色。
30%
60%
80%
90%
vue
<SrProgress :percentage="60" />
<SrProgress :percentage="60" status="success" />
<SrProgress :percentage="100" /> <!-- 自动变成功色 -->颜色不是唯一的区分手段
warning 与 danger 只靠颜色区分，色觉障碍用户分辨不出来。
进度条本身承载的信息是"进度到哪了"，颜色只是补充。 若状态会触发业务动作（如"超标告警"）， 务必同时用文字说明，不能只依赖颜色。
环形
25%
60%
100%
80%
vue
<SrProgress type="circle" :percentage="60" />size 控制直径，strokeWidth 控制线宽。
70%
70%
vue
<SrProgress type="circle" :percentage="70" :size="60" :stroke-width="4" />
<SrProgress type="circle" :percentage="70" :size="100" :stroke-width="6" />流动条纹
striped 用于"正在进行、时长不确定"的任务——动画暗示"还在动"。
0%
vue
<SrProgress :percentage="60" striped />进度条 vs 加载动画
两者容易混用，但语义不同：
| 用哪个 | |
|---|---|
| 知道进度（上传 60%、安装 3/5） | 进度条 |
| 不知道还要多久（请求中、初始化） | SrLoading |
给不确定的任务配一个假进度条（比如从 0 慢慢爬到 90% 然后停住） 是在骗用户——他会在 90% 那里等很久，然后突然跳到 100%。 不如诚实地转个圈。
隐藏文字
show-text="false" 只留进度条本身。
vue
<SrProgress :percentage="70" :show-text="false" />动画降级
striped 的流动动画与百分比变化的过渡在 prefers-reduced-motion: reduce 下自动关闭—— 进度条会直接跳到新位置，不做补间。
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
percentage | number | 0 | 百分比（0–100） |
type | 'line' | 'circle' | 'line' | 形态 |
status | 'primary' | 'success' | 'warning' | 'danger' | 自动派生 | 状态色 |
strokeWidth | number | — | 线宽 |
showText | boolean | true | 是否显示百分比文字 |
size | number | — | 环形直径（px） |
striped | boolean | false | 是否显示流动条纹 |
无障碍
- 容器带
role="progressbar"，并暴露aria-valuenow/aria-valuemin/aria-valuemax——这是读屏软件获知进度的唯一方式 - 进度文字如果是动态更新的，用
aria-live="polite"， 但不要每次变化都播报（每 5% 播一次已经很吵）。 通常只需在完成时播报一次 - 条纹动画对前庭敏感人群不友好，
prefers-reduced-motion下已关闭