Progress 进度条
Rue Progress 展示原生progress的轻量入口，同时补充更贴近成熟业务组件 的核心能力： 支持line、circle、dashboard、status、showInfo、format、success和 steps。
支持优先
基础的 value / max 继续可用
最简单的用法仍直接输出原生progress，项目页面不用重写。
形态补充
line、circle、dashboard 一次覆盖
同一套 API 在不同形态间切换，便于把列表、卡片和概览页统一起来。
信息增强
支持状态、步骤、成功段与自定义文案
不只是展示百分比，也能表达异常、已完成比例和阶段式进度。
# Progress
# Progress colors
neutral
primary
secondary
accent
info
success
warning
error
# Indeterminate
# Status and success
active
72%
success split
46% 已完成 / 78% 总进度
exception
# Labels and positions
# Circle and dashboard
circle
75%
small
48%
dashboard
66%
custom content
92%
healthy
# Steps
62%
circle steps
60%
# Dynamic
当前进度68%
68%
交互建议
用percent驱动语义模式；基础场景仍可可以传value/max 保持原生语义。
API
Progress在简单场景下支持原生条形写法；进入语义模式后，统一由 type、status、showInfo、success和 steps这些属性驱动。
通用属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
percent / value + max | 语义模式推荐使用 percent；基础场景仍支持 value + max，并在简单场景下继续渲染原生 progress。 | number | - |
type | 切换线形、圆形与仪表盘三种展示方式。 | 'line' | 'circle' | 'dashboard' | 'line' |
status | 控制状态语义；未显式传入时，percent >= 100 会自动转为 success。 | 'normal' | 'active' | 'exception' | 'success' | 自动推导 |
showInfo / format | 显示默认百分比、状态图标或自定义文案。 | boolean / (percent, successPercent) => any | true |
color / strokeColor / railColor | 使用 Rue 语义色，也支持自定义前景色、渐变和轨道色。 | ProgressColor / string / string[] / { from, to, direction } | - |
success | 拆分成功进度段，适合“已完成”和“处理中”共存的场景。 | { percent?: number; strokeColor?: string } | - |
Line 额外属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
steps | 把线形进度条切成离散步骤；传对象时可额外设置 gap。 | number | { count: number; gap: number } | - |
percentPosition | 控制线形进度文案放在内部还是外部，以及起始/居中/末端对齐。 | { align?: 'start' | 'center' | 'end'; type?: 'inner' | 'outer' } | { align: 'end', type: 'outer' } |
size | 线形模式支持 small、数字高度，或通过对象/数组指定宽高。 | number | 'small' | 'default' | 'medium' | [width, height] | { width?, height? } | 'medium' |
Circle / Dashboard 额外属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
strokeWidth | 圆形与仪表盘的环宽，按 100x100 画布百分比计算。 | number | 8 |
gapDegree / gapPlacement | 仪表盘缺口角度与位置；circle 默认为完整圆环，dashboard 默认底部缺口。 | number / 'top' | 'bottom' | 'start' | 'end' | 75 / bottom |
size | 圆形模式可传数字像素值，或使用 small / medium 预设。 | number | 'small' | 'medium' | 'default' | 'medium' |