mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 09:39:10 +08:00
da3babbe39
* feat: progress size * feat: update snapshots * feat: update demo * feat: update demo * docs: fix lint * feat: update demo * feat: update demo * docs: update doc * feat: update snapshots * docs: update doc * docs: update doc * docs: update doc * Update components/progress/index.en-US.md Co-authored-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Co-authored-by: lijianan <574980606@qq.com> * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * Update components/progress/utils.ts Co-authored-by: MadCcc <1075746765@qq.com> * feat: optimize code * feat: optimize code * feat: optimize code * Update components/progress/Circle.tsx Co-authored-by: MadCcc <1075746765@qq.com> * feat: optimize code * feat: optimize code * docs: update doc --------- Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: MadCcc <1075746765@qq.com>
3.7 KiB
3.7 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 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
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, 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 linear-gradient when passing an object |
string | object | - | - |
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 |