---
title: Progress - 进度条
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 6
  title: 反馈组件
  path: /feedback
---

定义：展示操作的当前进度。

## 线形进度条

以线形表示进度的组件，可以选择性地配有文字或图标补充显示进度和状态。多用于信息量较为丰富的情况。

### 默认在线形外展示进度和状态

<code src="./demos/base1.tsx" />

### 可以在线形内展示进度信息

<code src="./demos/base2.tsx" />

## 环形进度条

以线形表示进度的组件，环内可选择性地配有文字或图标补充显示进度和状态。多用于需要强调进度百分比的情况。

### 默认

<code src="./demos/circle.tsx" />

## API

各类型共用的属性。

| 属性          | 说明                                                                   | 类型                                     | 默认值                     |
| ------------- | ---------------------------------------------------------------------- | ---------------------------------------- | -------------------------- |
| format        | 内容的模板函数                                                         | function(percent, successPercent)        | (percent) => percent + `%` |
| percent       | 百分比                                                                 | number                                   | 0                          |
| showInfo      | 是否显示进度数值或状态图标                                             | boolean                                  | true                       |
| status        | 状态，可选：`success` `exception` `alarm` `normal` `active`(仅限 line) | string                                   | -                          |
| strokeColor   | 进度条的色彩                                                           | string                                   | -                          |
| strokeLinecap | 进度条的样式                                                           | `round` \| `square`                      | `round`                    |
| success       | 成功进度条相关配置                                                     | { percent: number, strokeColor: string } | -                          |
| trailColor    | 未完成的分段的颜色                                                     | string                                   | -                          |
| type          | 类型，可选 `line` `circle` `dashboard`                                 | string                                   | `line`                     |
| infoConfig    | 提示信息配置项                                                         | `InfoConfig`                             | -                          |

### InfoConfig

| 属性     | 说明                                | 类型                      | 默认值 |
| -------- | ----------------------------------- | ------------------------- | ------ |
| infoIcon | icon 类型                           | `success` `error` `alarm` | -      |
| position | 提示信息位置（type 为 line 时有效） | `inner` `outer`           | outer  |
| unit     | 单位（type 为 circle 时有效）       | `string`                  | %      |

### `type="line"`

| 属性        | 说明                               | 类型                                                      | 默认值 |
| ----------- | ---------------------------------- | --------------------------------------------------------- | ------ |
| steps       | 进度条总共步数                     | number                                                    | -      |
| strokeColor | 进度条的色彩，传入 object 时为渐变 | string \| { from: string; to: string; direction: string } | -      |
| strokeWidth | 进度条线的宽度，单位 px            | number                                                    | 10     |

### `type="circle"`

| 属性        | 说明                                             | 类型             | 默认值 |
| ----------- | ------------------------------------------------ | ---------------- | ------ |
| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变         | string \| object | -      |
| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number           | 6      |
| width       | 圆形进度条画布宽度，单位 px                      | number           | 132    |
| size        | 圆形进度条尺寸                                   | `large` `small`  | large  |

### `type="dashboard"`

| 属性        | 说明                                               | 类型                                   | 默认值   |
| ----------- | -------------------------------------------------- | -------------------------------------- | -------- |
| gapDegree   | 仪表盘进度条缺口角度，可取值 0 ~ 295               | number                                 | 75       |
| gapPosition | 仪表盘进度条缺口位置                               | `top` \| `bottom` \| `left` \| `right` | `bottom` |
| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number                                 | 6        |
| width       | 仪表盘进度条画布宽度，单位 px                      | number                                 | 132      |