Search
Progress

Display the current progress of an operation flow.

Progress

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.


Progress bar

A standard progress bar.
30%
50%

Mini size progress bar

Appropriate for a narrow area.
30%
50%

Circular progress bar

A circular progress bar.
75%

Mini size circular progress bar

A smaller circular progress bar.
30%

Dynamic circular progress bar

A dynamic progress bar is better.
0%

Dynamic

A dynamic progress bar is better.
0%

Custom text format

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

Dashboard

By setting type=dashboard, you can get a dashboard style of progress easily. Modify gapDegree to set the degree of gap.
75%
75%

Progress bar with success segment

A standard progress bar. Doesn't support trail color when type="circle|dashboard".
50%
75%
75%

Square linecaps

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

Custom line gradient

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

Progress bar with steps

A progress bar with steps.
50%

30%

API

Properties that shared by all types.
PropertyDescriptionTypeDefault
type
to set the type, options: line circle dashboard
string
line
format
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
-
strokeLinecap
to set the style of the progress linecap
round | square
round
strokeColor
color of progress bar
string
-
successPercent
segmented success percent
number
0
trailColor
color of unfilled part
string
-
type="line"
PropertyDescriptionTypeDefault
strokeWidth
to set the width of the progress bar, unit: px
number
10
strokeColor
color of progress bar, render linear-gradient when passing an object
string | { from: string; to: string; direction: string }
-
steps
the total step count
number
-
type="circle"
PropertyDescriptionTypeDefault
width
to set the canvas width of the circular progress, unit: px
number
132
strokeWidth
to set the width of the circular progress, unit: percentage of the canvas width
number
6
strokeColor
color of circular progress, render linear-gradient when passing an object
string | object
-
type="dashboard"
PropertyDescriptionTypeDefault
width
to set the canvas width of the dashboard progress, unit: px
number
132
strokeWidth
to set the width of the dashboard progress, unit: percentage of the canvas width
number
6
gapDegree
the gap degree of half circle, 0 ~ 295
number
75
gapPosition
the gap position, options: top bottom left right
string
bottom