Progress Bar #
The va-progress-bar component is used to display an indicator of an app loading content. Also check the va-progress-circle component.
Examples #
Default #
By default, the va-progress-bar displays a horizontal progress bar. Use the value prop to control the progress.
Indeterminate #
Use the indeterminate prop so that the va-progress-bar continuously animates.
Coloring #
Use predefined colors or use your own with the color prop.
Sizing #
Use predefined sizes or use your own with the size prop.
Slots #
There is also the default slot if you want to display some additional info about the progress.
Buffer #
When dealing with media content like streaming videos we can use progress bars to show the buffering progress indicator on a video.
Maximum value #
You can set maximum value for progress bar component
Accessibility #
The role of the component is progressbar, the aria-label of the component is progress state, if the value of the component is not indeterminate, aria-valuenow is set to the modelValue prop.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| ariaLabel | The aria-label of the component |
|
|
| buffer | Create a loading bar with a buffer. Commonly used in videos |
|
|
| color | Color of the component (theme string or |
|
|
| contentInside | Sets the content of the slot inside the progress bar |
|
|
| indeterminate | Create a indeterminate loading bar |
|
|
| max | Maximum value |
|
|
| modelValue | The value of the |
|
|
| preset | Named preset combination of component props. |
| - |
| reverse | Reverse the progress bar direction |
|
|
| rounded | Add a border radius to the |
|
|
| showPercent | Shows the indicator value with a percent sign |
|
|
| size | Specify size for component. |
|
|
Slots #
| Name | Description |
|---|---|
default | Display any additional info about the progress |
Css Variables #
| Name | Default Value |
|---|---|
| --va-progress-bar-width | 100% |
| --va-progress-bar-position | relative |
| --va-progress-bar-overflow | hidden |
| --va-progress-bar-height | 0.5rem |
| --va-progress-bar-border-radius | 9999999px |
| --va-progress-bar-sm-height | 2px |
| --va-progress-bar-lg-height | 16px |
| --va-progress-bar-info-font-weight | 700 |
| --va-progress-bar-info-text-align | center |
| --va-progress-bar-info-text-transform | uppercase |
| --va-progress-bar-info-not-empty-margin-bottom | 0.1rem |
| --va-progress-bar-buffer-opacity | 0.3 |
| --va-progress-bar-buffer-transition | width ease 2s |
| --va-progress-bar-transition | width ease 2s |
| --va-progress-bar-letter-spacing | 0.6px |
| --va-progress-bar-line-height | 1 |
| --va-progress-bar-font-size | 0.8em |
| --va-progress-bar-font-weight | 700 |