FEEDBACK & OVERLAY
进度条Progress Bar
一条圆角细条从左往右填色，不确定时长时用斑马纹循环动画代替。
效果预览
适合用在哪
文件上传、安装进度、表单完成度、资料完善引导。
容易踩的坑
- 进度条只靠颜色区分成功和错误，色弱用户分辨不出，应同时配文字或图标。
- 假进度条长时间卡在 99%，用户以为程序卡死而刷新页面，导致任务中断。
- 未使用 role="progressbar" 和 aria-valuenow，读屏用户无法获知当前进度。
设计提示词 · Prompt
进度条（Progress Bar）：轨道 6-8px 高、圆角 999px、浅灰底；填充条用品牌渐变。确定性进度：配右对齐的百分比数字（tabular-nums）。不确定性进度（不知道还要多久）：斑马纹循环（45° 条纹 + background-position 动画）或来回摆动的滑块。语义色：常规品牌色、上传绿色、错误红。完成瞬间从 99% 到 100% 的那一下要有明确的"落定"动画（轻微闪一下或对勾弹出）。
Progress Bar: track 6-8px high, border radius 999px, light gray background; the fill uses a brand gradient. Determinate progress: pair with a right-aligned percentage number (tabular-nums). Indeterminate progress (unknown remaining time): a looping zebra stripe (45° stripes + background-position animation) or a slider swinging back and forth. Semantic colors: brand color by default, green for uploads, red for errors. The moment of going from 99% to 100% should have a clear "settle" animation (a slight flash or a checkmark popping in).
常见搭配
同一页面里经常和「进度条」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-progwrap">
<div class="d-progbar">
<div class="d-progbar__top"><b>上传中…</b><span>72%</span></div>
<div class="d-progbar__track"><div class="d-progbar__fill d-progbar__fill--a"></div></div>
</div>
<div class="d-progbar">
<div class="d-progbar__top"><b>处理数据</b><span>46%</span></div>
<div class="d-progbar__track"><div class="d-progbar__fill d-progbar__fill--striped" style="background-color:var(--i-ok)"></div></div>
</div>
</div>