⚡ Progress · 进度条 / 电量条

来源：Figma 「电量条」共 342 次实例抽取
4 个 variant · Linear（线性进度）/ Battery（电池）/ Circular（环形）/ Stepper（多段步进）
频率：Figma 使用 #1 高频缺失组件

① Linear · 线性进度条

25%
50%
75%
90%
loading…

尺寸变体

thin 4px
default 8px
thick 12px

② Battery · 电池 / 电量

车辆 / 手机 / 设备剩余电量展示。从 Figma 「电量条」直接通用化而来。

90%


55%


18%


⚡ 60%

胶囊电池 · 顶部导航内嵌

🔋
75%

③ Circular · 环形进度

75%
   
   
80%

④ Stepper · 步进进度

A. 段落条


B. 节点式 · 购车流程

✓
选车型
✓
贷款预审
3
信用评估
4
合同签署
5
提车
📐 规范：
• Linear 默认 8px 高度、Yellow-500 主题，状态色（success/warning/error）映射文本色
• Battery 80×32px、2px 边框，状态分档 ≥60% 绿 / 30-60% 黄 / <30% 红
• Circular 半径=容器一半、stroke 8px；数字居中字号=容器 1/4
• Stepper 节点 32px；连线 2px grey-100，完成态转 Yellow-500

🎨 对应 Design Tokens

元素用 Token
Linear 轨道--grey-100 (#F1F1F1)
Linear 填充--yellow-500 (#FFCF20) / --green-500 / --red-500
Battery 边框--grey-900 (#222222)
Battery ≥60%--green-500
Battery 30-60%--yellow-500
Battery <30%--red-500
Circular 轨道--grey-100
Circular 进度--yellow-500
Stepper done--yellow-500
Stepper pending--grey-100