v-progress-linear component is used to convey data visually to users. They can also represent an indeterminate amount, such as loading or processing.
In its simplest form,
v-progress-linear displays a horizontal progress bar. Use the
value prop to control the progress.
Select your desired component from below and see the available props, slots, events and functions.
Below is a collection of simple to complex examples.
The progress linear component can have a determinate state modified by
v-progress-linear continuously animates.
A buffer state represents two values simultaneously. The primary value is controlled by
v-model, whereas the buffer is controlled by the
query state is controlled by the truthiness of indeterminate, while the
query prop set to true.
You can also set the color using the props
rounded prop is an alternative style that adds a border radius to the
stream property works with
buffer-value to convey to the user that there is some action taking place. You can use any combination of
value to achieve your design.
This applies a striped background over the value portion of the
Displays reversed progress (right to left in LTR mode and left to right in RTL).
absolute prop we are able to position the
v-progress-linear component at the bottom of the
v-toolbar. We also use the
active prop which allows us to control the visibility of the progress.
v-progress-linear component is good for translating to the user that they are waiting for a response.
v-progress-linear component will be responsive to user input when using
v-model. You can use the default slot or bind a local model to display inside of the progress. If you are looking for advanced features on a linear type component, check out v-slider.
Ready for more? Continue reading with: