Importimport { Progress } from 'antd'; |
contributors
Importimport { Progress } from 'antd'; |
If it will take a long time to complete an operation, you can use Progress to show the current progress and status.
Common props ref：Common props
Properties that shared by all types.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| format | The template function of the content | function(percent, successPercent) | (percent) => percent + % | - |
| percent | To set the completion percentage | number | 0 | - |
| railColor | The color of unfilled part | string | - | - |
| 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 | - |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | |
| success | Configs of successfully progress bar | { percent: number, strokeColor: string } | - | - |
The color of unfilled part. Please use railColor instead | string | - | - | |
| type | To set the type, options: line circle dashboard | string | line | - |
| size | Progress size | number | [number | string, number] | { width: number, height: number } | "small" | "medium" | "medium" | 5.3.0, Object: 5.18.0 |
type="line"| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| steps | The total step count | number | - | - |
| rounding | The function to round the value | (step: number) => number | Math.round | 5.24.0 |
| 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 | - |
| gapPlacement | The gap placement, options: top bottom start end | string | bottom | - |
The gap position, options: top bottom left right, please use gapPlacement instead | string | bottom | - | |
| strokeWidth | To set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 | - |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| circleIconFontSize | Icon size of circular progress bar | string | 1.1666666666666667em |
| circleTextColor | Text color of circular progress bar | string | rgba(0,0,0,0.88) |
| circleTextFontSize | Text size of circular progress bar | string | 1em |
| defaultColor | Default color of progress bar | string | #1677ff |
| lineBorderRadius | Border radius of line progress bar | number | 100 |
| remainingColor | Color of remaining part of progress bar | string | rgba(0,0,0,0.06) |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgContainer | Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`. | string | #ffffff |
| colorError | Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc. | string | #ff4d4f |
| colorSuccess | Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens. | string | #52c41a |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorWhite | Pure white color don't changed by theme | string | #fff |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontSizeSM | Small font size | number | 12 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| marginXXS | Control the margin of an element, with the smallest size. | number | 4 |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| motionEaseInOutCirc | Preset motion curve. | string | |
| motionEaseOutQuint | Preset motion curve. | string | |
| paddingXXS | Control the extra extra small padding of the element. | number | 4 |