Progress 进度条
用于展示当前操作的进度状态。融合了各家 UI 之长，并首创了双态进度、多环嵌套以及高性能环形动效。
基础用法
线形进度条，支持多种内置语义化颜色及自动状态图标。
50%
基础用法指标
进度条内显示百分比标识
百分比不占用额外空间，适用于文件上传等场景。可以通过 stroke-width 更改进度条的高度，并通过 text-inside 属性来改变进度条内部的文字。
内显百分比
自定义内容
通过默认插槽添加自定义内容。针对环形进度条，还支持作用域插槽（Scoped Slot）来获取实时进度。
Content
80%
Progressing
自定义内容演示
环形与仪表盘
通过 type="circle" 或 dashboard 开启。支持旋转动画与自定义 SVG 渐变。
80%
50%
视觉增强
多环嵌套 (Premium)
通过向 percentage 传递数组，可以实现类似 Apple Watch 的多环嵌套效果。
多维数据
多圈赛跑
多圈赛跑
条纹与流动
开启 striped 增加设计感，开启 striped-flow 让进度条“动”起来。
60%
80%
动态条纹
高级特性
1. 双态感应进度 (Secondary Percentage)
支持 secondary-percentage 属性。非常适合视频播放缓冲。
20%
双态演示
2. 精准分段 (Steps)
通过 steps 属性可以将进度条通过物理刻度进行切分。
60%
分段刻度
3. 未确定状态 (Indeterminate)
当无法预知确切数值（如正在扫描、正在连接）时。
加载中状态
在 Nuxt 中使用
组件已完美适配 Nuxt 3，支持自动导入与 SSR 渐变 ID 唯一化。
50%
Nuxt 适配
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 进度类型 | 'line' | 'circle' | 'dashboard' | 'line' |
| percentage | 百分比 | number | number[] | 0 |
| secondary-percentage | 二级百分比（带缓冲感） | number | 0 |
| status | 内置状态，自动匹配颜色与图标 | 'success' | 'exception' | 'warning' | 'info' | — |
| stroke-width | 进度条宽度 | number | 6 |
| text-inside | 文字内显（仅限 line 类型） | boolean | false |
| width | 环形画布宽度 | number | 126 |
| show-text | 是否显示进度文字/图标 | boolean | true |
| color | 进度条颜色，支持函数/数组渐变/对象渐变 | string | function | string[] | Record<string, string> | — |
| define-background-color | 背景轨道颜色 | string | — |
| icon | 自定义状态图标 | string | — |
| animated | 开启环形旋转动效 | boolean | false |
| steps | 分段数量 | number | 0 |
| stroke-linecap | 进度条末端形状 | 'butt' | 'round' | 'square' | 'round' |
| format | 文字定制化函数 | function(percentage) | — |
| striped | 开启条纹样式 | boolean | false |
| striped-flow | 开启条纹流动动画 | boolean | false |
| indeterminate | 开启未确定滑动模式 | boolean | false |
| duration | 动画周期时长 (s) | number | 3 |
Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| default | 自定义进度条中心或右侧的内容 | { percentage: number } |
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-progress-bar-bg | 轨道背景 | var(--yh-fill-color-darker) |
--yh-progress-duration | 默认动画周期 | 3s |