# progress (w-progress)

- **Import**: `WProgress` from `win-design-next`
- **Tag**: `<w-progress>`
- **说明**: Progress 进度条
- **分类**: data-display
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/progress.md`

## API

## API

### 属性

| 参数                   | 说明                                                          | 类型                                                                                                        | 默认值 | Version |
| ---------------------- | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------ | ------- |
| percentage ^(required) | percentage                                                    | ^[number]`(0-100)`                                                                                          | 0      |
| type                   | 进度条类型                                                    | ^[enum]`'line' \| 'circle' \| 'dashboard'`                                                                  | line   |
| stroke-width           | 进度条的宽度                                                  | ^[number]                                                                                                   | 6      |
| text-inside            | 进度条显示文字内置在进度条内（仅 `type` 为 'line' 时可用）    | ^[boolean]                                                                                                  | false  |
| status                 | 进度条当前状态                                                | ^[enum]`'success' \| 'exception' \| 'warning'`                                                              | —      |
| indeterminate          | 是否为动画进度条                                              | ^[boolean]                                                                                                  | false  |
| duration               | 控制动画进度条速度和条纹进度条流动速度                        | ^[number]                                                                                                   | 3      |
| color                  | 进度条背景色 （会覆盖 `status` 状态颜色）                     | ^[string] / ^[function]`(percentage: number) => string` / ^[Array]`{ color: string; percentage: number }[]` | ''     |
| width                  | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | ^[number]                                                                                                   | 126    |
| show-text              | 是否显示进度条文字内容                                        | ^[boolean]                                                                                                  | true   |
| stroke-linecap         | circle/dashboard 类型路径两端的形状                           | ^[enum]`'butt' \| 'round' \| 'square'`                                                                      | round  |
| format                 | 指定进度条文字内容                                            | ^[Function]`(percentage: number) => string`                                                                 | —      |
| striped                | 在进度条上增加条纹                                            | ^[boolean]                                                                                                  | false  |
| striped-flow           | 让进度条上的条纹流动起来                                      | ^[boolean]                                                                                                  | false  |
| animated               | 是否启用加载动画(仅条形进度条可用)                            | ^[boolean]                                                                                                  | false  | V0.0.9  |
| title                  | 进度条标题                                                    | ^[string]                                                                                                   | -      | V0.0.9  |
| plain                  | 是否为朴素进度条                                              | ^[boolean]                                                                                                  | false  | V0.0.9  |

### Slots

| 名称    | 说明       | 类型                              |
| ------- | ---------- | --------------------------------- |
| default | 自定义内容 | ^[object]`{ percentage: number }` |
| title   | 自定义标题 |                                   |
