Skip to content

Progress NEW

The Progress component allows you to view the progress of any activity.

Basic usage

You can control the current percentage of progress.


You can set the height of the progress bar using the stroke-width property.

You can also use the text-inside property to embed text inside the progress bar.


The progress bar has three states, each with a different default style.


You can have a Progress bar with indeterminate value with the indeterminate property.

You cam control the animation duration by duration.


You can change the color of the Progress with the property color, it accepts color string, function, or array.

You have much more customization.


You can change the background of the Progress with the bg-color property.


You can add striped prop to Progress to apply a stripe over the progress bar's background color.

You can use striped-flow to get the stripes to flow, with duration to control the animation duration.

Circular Progress

You can specify type property to circle to use circular progress bar, and use width property to change the size of circle.

Dashboard Progress

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

Customized content

Use default slot to add customized content.

Progress Props

percentagenumber0Percentage, required.
type'line' | 'circle' | 'dashboard''line'The type of progress bar.
stroke-width'xs' | 'sm' | 'md' | 'lg' | number'sm'The width of progress bar.
text-insidebooleanfalseWhether to place the percentage inside progress bar, only works when type is 'line'.
status'success' | 'error' | 'warning'''The current status of progress bar.
indeterminatebooleanfalseSet indeterminate progress.
durationnumber3Control the animation duration of indeterminate progress or striped flow progress.
colorstring | function | array''Progress bar color. Overrides status prop.
bg-colorstring | function | array''Progress bar Background color.
stripedbooleanfalseStripe over the progress bar's color.
striped-flowbooleanfalseGet the stripes to flow.
not-text-colorbooleanfalseDo not synchronize the text color with the progress bar color.
widthnumber126The canvas width of circle progress bar.
show-textbooleantrueWhether to show percentage.
stroke-linecap'butt' | 'round' | 'square''round'Circle/Dashboard type shape at the end path.
format(percentage: number) => string(percentage: number): string => percentage + '%'Custom text format.

Progress Slots

default()Customized content, parameter is { percentage }

MIT Licensed