logo

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.

expand code expand code

Appropriate for a narrow area.

expand code expand code

A dynamic progress bar is better.

expand code expand code

You can set a custom text by setting the format prop.

expand code expand code

A standard progress bar.

expand code expand code

A progress bar with steps.

expand code expand code

Sets the not yet filled part of the bar with TrailColor.

expand code expand code

A circular progress bar.

expand code expand code

A smaller circular progress bar.

expand code expand code

A dynamic progress bar is better.

expand code expand code

By setting type=dashboard, you can get a dashboard style of progress easily.

expand code expand code

By setting strokeLinecap="square", you can change the linecaps from round to square.

expand code expand code

A package of linear-gradient. It is recommended to only pass two colors.

expand code expand code

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 --
Popconfirm Result
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.