Documentation
Documentation Hub

Progress bar

Use the progress prop to set the progress of the progress bar. Use the size prop to change the size of the progress bar.

Show code
vue

Progress circle

Use the progress prop to set the progress of the progress circle. Use the size prop to change the size of the component.

Show code
vue

Bar sizes

Progress bars can have different sizes. Use the size prop to change the size of the progress bar.

Show code
vue

Colors

Progress bars can have different colors. Use the color prop to change the size of the progress bar.

Show code
vue

Indeterminate

Progress bars can be shown in an indeterminate state. Omit the value prop to change the progress bar to an indeterminate state.

Show code
vue

#<BaseProgress>

•Properties

classes
Optional CSS classes to apply to the component inner elements.
Show example
vue
max
The maximum value of the progress bar.
Show example
vue
value
The current value of the progress bar. If `value` is not provided, the progress bar will be in an indeterminate state.
Show example
vue

•Properties (with app.config)

color
The color of the progress bar.
Show example
vue
rounded
The radius of the progress bar.

@since

2.0.0

Show example
vue
contrast
The contrast ot the progress bar.
Show example
vue
size
The size of the progress bar.
Show example
vue

•Exposed

color
The color of the progress bar.
Show example
vue
rounded
The radius of the progress bar.
Show example
vue
contrast
The contrast ot the progress bar.
Show example
vue
size
The size of the progress bar.
Show example
vue

#<BaseProgressCircle>

•Properties

animation
Enable/disable animation, or set the animation duration (in seconds).
Show example
vue
classes
Optional CSS classes to apply to the component inner elements.
Show example
vue
max
The maximum value of the progress circle.
Show example
vue
size
The size of the progress circle.
Show example
vue
thickness
The thickness of the progress circle.
Show example
vue
value
The current value of the progress circle.
Show example
vue

•Properties (with app.config)

color
Defines the color of the progress circle

@since

3.0.0

Show example
vue

•Exposed

color
Defines the color of the progress circle
Show example
vue