# Progress 进度条

## 何时使用
在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
- 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时；
- 当需要显示一个操作完成的百分比时。

### 基本使用
标准进度条。三种状态：active，exception，success。

@[demo](demo/basic.vue)

### 百分比内显
百分比不占用额外控件，适用于文件上传等场景。

@[demo](demo/inner.vue)

### 环形进度条
Progress 组件可通过 type 属性来指定使用环形进度条，在环形进度条中，还可以通过 width 属性来设置其大小。gapPosition设置圆形进度条缺口位置。

@[demo](demo/circle.vue)

### 自定义文字格式
format 属性指定格式。

@[demo](demo/format.vue)

### props
| 参数         | 说明                                                 | 类型     | 可选值                   | 默认值   |
| ------------ | ---------------------------------------------------- | -------- | ------------------------ | -------- |
| percentage   | 百分比（必填）                                       | number   | 0-100                    | 0        |
| type         | 进度条类型                                           | string   | line/circle              | line     |
| stroke-width | 进度条的宽度，单位px                                 | number   | --                       | 6        |
| text-inside  | 进度条显示文字内置在进度条内（只在 type=line 时可用) | boolean  | --                       | false    |
| status       | 进度条当前状态                                       | string   | success/exception/active | --       |
| color        | 进度条背景色（会覆盖 status 状态颜色）               | string   | --                       | --       |
| width        | 环形进度条画布宽度（只在 type=circle 时可用）        | number   | --                       | --       |
| show-text    | 是否显示进度条文字内容                               | boolean  | --                       | true     |
| gapPosition  | 圆形进度条缺口位置(type=circle时可用)                | string   | top/right/bottom/left    | top      |
| format       | 内容的函数模板                                       | function | --                       | () => {} |

### slots
| 参数           | 说明     |
| -------------- | -------- |
| percentageText | 文字内容 |