Progress 进度条
用于展示操作进度
直线进度条
进度条内显示百分比标识
百分比不占用额外空间，适用于文件上传等场景。
自定义进度条的颜色
环形进度条
仪表盘形进度条
自定义内容
动画进度条
条纹进度条
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| percentage | 百分比, 必填 | number | 0 |
| type | 进度条类型 | enum | line |
| stroke-width | 进度条的宽度 | number | 6 |
| text-inside | 进度条显示文字内置在进度条内（仅 type 为 'line' 时可用） | boolean | false |
| status | 进度条当前状态 | enum | — |
| indeterminate | 是否为动画进度条 | boolean | false |
| duration | 控制动画进度条速度和条纹进度条流动速度 | number | 3 |
| color | 进度条背景色 进度条背景色 （会覆盖 status 状态颜色） | string / function / Array | '' |
| width | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number | 126 |
| show-text | 是否显示进度条文字内容 | boolean | true |
| stroke-linecap | circle/dashboard 类型路径两端的形状 | enum | round |
| format | 指定进度条文字内容 | Function | — |
| striped | 在进度条上增加条纹 | boolean | false |
| striped-flow | 让进度条上的条纹流动起来 | boolean | false |
Slots
| 名称 | 说明 |
|---|---|
| default | 自定义内容，参数为 { percentage } |
类型定义
组件导出以下类型定义：
ts
import type { ProgressProps } from 'ryxon'主题定制
样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --r-progress-line-height | 6px | 直线进度高度 |
| --r-progress-line-background-color | var(--r-border-color-lighter) | 直线进度背景色 |
| --r-progress-line-radius | 100px | 直线进度圆角 |
| --r-progress-text-font-size | 14px | 进度条文字大小 |
| --r-progress-text-color | var(--r-text-color-regular) | 进度条文字颜色 |
| --r-progress-text-margin-left | 5px | - |
| --r-progress-inner-font-size | 12px | 进度条内置文字大小 |
| --r-progress-inner-margin | 0 5px | - |