Progress

Progress is used to show the progress of current operation, and inform the user the current status.

Linear progress bar

Internal percentage

In this case the percentage takes no additional space.

Custom color

You can use color attr to set the progress bar color. it accepts color string, function, or array.

Circular progress bar

Dashboard progress bar

You also can specify type attribute to dashboard to use dashboard progress bar.

Customized content

Indeterminate progress

Striped progress

API

Attributes

NameDescriptionTypeDefault
percentagepercentage, requirednumber0
typethe type of progress barenumline
stroke-widththe width of progress barnumber6
text-insidewhether to place the percentage inside progress bar, only works when type is 'line'booleanfalse
statusthe current status of progress barenum—
indeterminateset indeterminate progressbooleanfalse
durationcontrol the animation duration of indeterminate progress or striped flow progressnumber3
colorbackground color of progress bar. Overrides status propstring / function / Array''
widththe canvas width of circle progress barnumber126
show-textwhether to show percentagebooleantrue
stroke-linecapcircle/dashboard type shape at the end pathenumround
formatcustom text formatFunction—
striped 2.3.4stripe over the progress bar's colorbooleanfalse
striped-flow 2.3.4get the stripes to flowbooleanfalse

Slots

NameDescription
defaultCustomized content, parameter is { percentage }