ant-design/components/progress/index.zh-CN.md

---
category: Components
subtitle: 进度条
type: Feedback
title: Progress
---

展示操作的当前进度。

## 何时使用

在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。

- 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时；
- 当需要显示一个操作完成的百分比时。


## API

| 属性      | 说明           | 类型     | 默认值         |
|----------|---------------|----------|---------------|
| type     | 类型，可选 `line` `circle` `dashboard` | string   | line      |
| percent  | 百分比 | number | 0 |
| format   | 内容的模板函数 | function(percent)   | `percent => percent + '%'` |
| status   | 状态，可选：`success` `exception` `active` | string   | - |
| showInfo | 是否显示进度数值或状态图标 | boolean | true  |
| strokeWidth `(type=line)` | 进度条线的宽度，单位 px | number | 10 |
| strokeWidth `(type=circle)` | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
| width `(type=circle)` | 圆形进度条画布宽度，单位 px | number | 132 |
-												docs: update documentation format

											
										
										
											2016-03-31 14:17:09 +08:00
+								---
 								category: Components
-												docs: update docs details

											
										
										
											2016-09-21 11:28:38 +08:00
+								subtitle: 进度条
-												docs: 调整组件导航结构 (#3758)

- Layout 更名为 Grid
											
										
										
											2016-11-09 14:43:32 +08:00
+								type: Feedback
-												docs: update docs details

											
										
										
											2016-09-21 11:28:38 +08:00
+								title: Progress
-												docs: update documentation format

											
										
										
											2016-03-31 14:17:09 +08:00
+								---
-												挖坑

											
										
										
											2015-05-27 15:43:29 +08:00
-												update progress demo

											
										
										
											2015-06-15 14:43:27 +08:00
+								展示操作的当前进度。
-												挖坑

											
										
										
											2015-05-27 15:43:29 +08:00
-												update progress demo

											
										
										
											2015-06-15 14:43:27 +08:00
+								## 何时使用
-												挖坑

											
										
										
											2015-05-27 15:43:29 +08:00
-												精简文案

											
										
										
											2015-06-19 10:42:49 +08:00
+								在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
-												交互文案

											
										
										
											2015-06-18 11:25:38 +08:00
-												docs: progress-translation (#2499)


											
										
										
											2016-07-26 15:42:04 +08:00
+								- 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时；
 								- 当需要显示一个操作完成的百分比时。
-												交互文案

											
										
										
											2015-06-18 11:25:38 +08:00
-												progress bar 和 progress circle api分开

											
										
										
											2015-07-29 23:36:27 +08:00
-												rename Progress files

											
										
										
											2016-04-05 16:55:52 +08:00
+								## API
-												progress bar 和 progress circle api分开

											
										
										
											2015-07-29 23:36:27 +08:00
-												rename Progress files

											
										
										
											2016-04-05 16:55:52 +08:00
+								| 属性      | 说明           | 类型     | 默认值         |
 								|----------|---------------|----------|---------------|
-												Upgrade `rc-progress` to `2.1.0`. Support dashboard. (#5372)

* Upgrade `rc-progress` to `2.1.0`. Support dashboard.

Progress dashboard type (half circle)[#5225]

* restore removed code, it is for compatibility

* format code

											
										
										
											2017-03-17 23:57:34 +08:00
+								| type     | 类型，可选 `line` `circle` `dashboard` | string   | line      |
-												docs: Unify type naming (#4636)

* Unify name of ReactNode type in document

* Lowser all string type name

* Lowercase all number type name

* Lowercase all boolean type name

* Unify array type

* Lowercase all object type name

* Unify mutilple types

											
										
										
											2017-01-20 20:10:50 +08:00
+								| percent  | 百分比 | number | 0 |
-												rename Progress files

											
										
										
											2016-04-05 16:55:52 +08:00
+								| format   | 内容的模板函数 | function(percent)   | `percent => percent + '%'` |
-												docs: Unify type naming (#4636)

* Unify name of ReactNode type in document

* Lowser all string type name

* Lowercase all number type name

* Lowercase all boolean type name

* Unify array type

* Lowercase all object type name

* Unify mutilple types

											
										
										
											2017-01-20 20:10:50 +08:00
+								| status   | 状态，可选：`success` `exception` `active` | string   | - |
 								| showInfo | 是否显示进度数值或状态图标 | boolean | true  |
 								| strokeWidth `(type=line)` | 进度条线的宽度，单位 px | number | 10 |
 								| strokeWidth `(type=circle)` | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
 								| width `(type=circle)` | 圆形进度条画布宽度，单位 px | number | 132 |