mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 21:48:19 +08:00
3.8 KiB
3.8 KiB
category | group | title | cover | coverDark | demo | ||
---|---|---|---|---|---|---|---|
Components | Feedback | Progress | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gK_4S6fDRfgAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJH8Tb1lcYAAAAAAAAAAAAAADrJ8AQ/original |
|
Display the current progress of an operation flow.
When To Use
If it will take a long time to complete an operation, you can use Progress
to show the current progress and status.
- When an operation will interrupt the current interface, or it needs to run in the background for more than 2 seconds.
- When you need to display the completion percentage of an operation.
Examples
Progress bar
Circular progress bar
Mini size progress bar
Responsive circular progress bar
Mini size circular progress bar
Dynamic
Custom text format
Dashboard
Progress bar with success segment
Stroke Linecap
Custom line gradient
Progress bar with steps
Progress size
API
Common props ref:Common props
Properties that shared by all types.
Property | Description | Type | Default | Version |
---|---|---|---|---|
format | The template function of the content | function(percent, successPercent) | (percent) => percent + % |
- |
percent | To set the completion percentage | number | 0 | - |
showInfo | Whether to display the progress value and the status icon | boolean | true | |
status | To set the status of the Progress, options: success exception normal active (line only) |
string | - | |
strokeColor | The color of progress bar | string | - | - |
strokeLinecap | To set the style of the progress linecap | round | butt | square , see stroke-linecap |
round |
- |
success | Configs of successfully progress bar | { percent: number, strokeColor: string } | - | - |
trailColor | The color of unfilled part | string | - | - |
type | To set the type, options: line circle dashboard |
string | line |
|
size | Progress size | number | [number | string, number] | "small" | "default" | "default" | v5.3.0 |
type="line"
Property | Description | Type | Default | Version |
---|---|---|---|---|
steps | The total step count | number | - | - |
strokeColor | The color of progress bar, render linear-gradient when passing an object, could accept string[] when has steps . |
string | string[] | { from: string; to: string; direction: string } | - | 4.21.0: string[] |
type="circle"
Property | Description | Type | Default | Version |
---|---|---|---|---|
strokeColor | The color of circular progress, render gradient when passing an object | string | { number%: string } | - | - |
strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 | - |
type="dashboard"
Property | Description | Type | Default |
---|---|---|---|
gapDegree | The gap degree of half circle, 0 ~ 295 | number | 75 |
gapPosition | The gap position, options: top bottom left right |
string | bottom |
strokeWidth | To set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 |