mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-06 05:58:46 +08:00
5098e6e209
* feat: progress add inside and bottom text position * feat: change progress percent position api * fix: change to follow coding standards * docs: reset i18n zh file * fix: change to follow coding standards * fix: change to follow coding standards * docs: reset i18n file * fix: change to follow coding standards * docs: reset i18n file * feat: progress inner text get brighten color * feat: update progress snapshots * fix: progress bottom layout center * feat: update steps snapshots * feat: update progress snapshots * feat: update config provider snapshots * feat: progress inner text add negate color * feat: update progress snapshots * feat: progress inner text add light bg color * feat: progress inner text add light bg color * feat: change progress percentPosition api * feat: change progress component test * feat: update progress line component snapshot * feat: progress component outer start layout text adapt * feat: progress line change to flex layout * feat: update progress snapshots * feat: update progress line style * feat: update progress line style * fix: progress line reset height use inline block * fix: change progress is line type * fix: change progress is line type * fix: delete progress outer styles * fix: change progress line type layout * fix: progress add outer style * feat: update progress snapshots * fix: change progress text bright color * fix: optimized code volume * fix: progress delete after style on inner layout * fix: update progress test file --------- Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: afc163 <afc163@gmail.com>
4.8 KiB
4.8 KiB
category | group | title | description | cover | coverDark | demo | ||
---|---|---|---|---|---|---|---|---|
Components | Feedback | Progress | Display the current progress of the operation. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gK_4S6fDRfgAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJH8Tb1lcYAAAAAAAAAAAAAADrJ8AQ/original |
|
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
Circular progress bar whit steps
Progress size
Change progress value position
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] | { width: number, height: number } | "small" | "default" | "default" | 5.3.0, Object: 5.18.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[] |
percentPosition | Progress value position, passed in object, align indicates the horizontal position of the value, type indicates whether the value is inside or outside the progress bar |
{ align: string; type: string } | { align: "end", type: "outer" } | 5.18.0 |
type="circle"
Property | Description | Type | Default | Version |
---|---|---|---|---|
steps | The total step count.When passing an object, count refers to the number of steps, and gap refers to the distance between them.When passing number, the default value for gap is 2. |
number | { count: number, gap: number } | - | 5.16.0 |
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 | Version |
---|---|---|---|---|
steps | The total step count.When passing an object, count refers to the number of steps, and gap refers to the distance between them.When passing number, the default value for gap is 2. |
number | { count: number, gap: number } | - | 5.16.0 |
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 |