进度条

Progress

UI 组件也叫：进度、进度环、ProgressBar、百分比条

一句话：用一条逐渐填满的横条或圆环，显示任务完成了多少，让用户知道还要等多久。

详细解释

进度条适合「能算出进度」的等待：上传文件、导出数据、安装步骤，也可以表示表单完成度、存储空间用量。它通常是一条灰色底轨，上面有一段深色逐渐变长，旁边标出百分比；也可以做成圆环，放在卡片或仪表盘里显示「完成率 72%」。任务失败时进度条要切换成错误状态，而不是停在原处。

等待类组件的分工：进度条 用在知道进度的情况；加载中（转圈图标）用在不知道要等多久、通常只等一两秒的情况；骨架屏 用在页面或列表首次加载，先画出内容的轮廓。另外注意区分 步骤条：步骤条显示流程走到了第几步，进度条显示一件事完成了多少。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

上传文件时，在文件名下方显示一条高 6px 的进度条，灰色底轨、深色填充，右侧显示百分比；上传完成后变成对勾和「已完成」，失败时进度条变红并显示「重试」按钮。进度变化要平滑过渡，不要跳变。

由底轨和按比例填充的进度段组成，常附带百分比文字或状态图标，圆环形式则用两层圆弧表示。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。