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
Name | Description | Type | Default |
---|---|---|---|
percentage required | percentage | number | 0 |
type | the type of progress bar | enum | line |
stroke-width | the width of progress bar | number | 6 |
text-inside | whether to place the percentage inside progress bar, only works when type is 'line' | boolean | false |
status | the current status of progress bar | enum | — |
indeterminate | set indeterminate progress | boolean | false |
duration | control the animation duration of indeterminate progress or striped flow progress | number | 3 |
color | background color of progress bar. Overrides status prop | string / function / Array | '' |
width | the canvas width of circle progress bar | number | 126 |
show-text | whether to show percentage | boolean | true |
stroke-linecap | circle/dashboard type shape at the end path | enum | round |
format | custom text format | Function | — |
striped 2.3.4 | stripe over the progress bar's color | boolean | false |
striped-flow 2.3.4 | get the stripes to flow | boolean | false |
Slots
Name | Description | Type |
---|---|---|
default | Customized content | object |