Ant Design Blazor
Progress
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
A standard progress bar.
Appropriate for a narrow area.
A dynamic progress bar is better.
You can set a custom text by setting the format prop.
A standard progress bar.
A package of linear-gradient. It is recommended to only pass two colors.
Sets the not yet filled part of the bar with TrailColor.
A circular progress bar.
A smaller circular progress bar.
A dynamic progress bar is better.
By setting type=dashboard, you can get a dashboard style of progress easily.
By setting strokeLinecap="square", you can change the linecaps from round to square.
A progress bar with steps.
Progress API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Size | Parameterprogress size | ProgressSize | ProgressSize.Default |
| Type | Parameterto set the type, options: line circle dashboard | ProgressType | ProgressType.Line |
| Format | Parametertemplate function of the content | Func<Double, String> | i% |
| Percent | Parameterto set the completion percentage | Double | -- |
| ShowInfo | Parameterwhether to display the progress value and the status icon | Boolean | true |
| Status | Parameterto set the status of the Progress, options: success exception normal active(line only) | ProgressStatus | ProgressStatus.Normal |
| StrokeLinecap | Parameterto set the style of the progress linecap | ProgressStrokeLinecap | ProgressStrokeLinecap.Round |
| SuccessPercent | Parametersegmented success percent | Double | 0 |
| TrailColor | Parametercolor of unfilled part | String | -- |
| StrokeWidth | Parameterto set the width of the progress bar, unit: px to set the width of the circular progress, unit: percentage of the canvas width to set the width of the dashboard progress, unit: percentage of the canvas width | Int32 | Type = line: 10, Type = circle or dashboard: 6 |
| StrokeColor | Parametercolor of progress bar, render linear-gradient when passing an object color of circular progress, render linear-gradient when passing an object | OneOf<String, Dictionary<String, String>> | -- |
| Steps | Parameterthe total step count | Int32 | 0 |
| Width | Parameterto set the canvas width of the circular progress, unit: px to set the canvas width of the dashboard progress, unit: px | Int32 | 120 |
| GapDegree | Parameterthe gap degree of half circle, 0 ~ 295 | Int32 | 75 |
| GapPosition | Parameterthe gap position, options: top bottom left right | ProgressGapPosition | ProgressGapPosition.Bottom |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |