# Progress linear

The v-progress-linear component is used to convey data visually to users. They can also represent an indeterminate amount, such as loading or processing.

# Usage

In its simplest form, v-progress-linear displays a horizontal progress bar. Use the value prop to control the progress.


# Examples

# Props

# Buffer value

A buffer state represents two values simultaneously. The primary value is controlled by v-model, whereas the buffer is controlled by the buffer-value prop.

# Colors

You can also set the color using the props color and background-color.

# Indeterminate

Using the indeterminate prop, v-progress-linear continuously animates.

# Reversed

Displays reversed progress (right to left in LTR mode and left to right in RTL).

# Rounded

The rounded prop is an alternative style that adds a border radius to the v-progress-linear component.

# Stream

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 buffer-value and value to achieve your design.

# Striped

This applies a striped background over the value portion of the v-progress-linear.

# Query

The query props value is controlled by the truthiness of indeterminate, while the query prop set to true.

# Slots

# Default

The 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.

# Misc

# Determinate

The progress linear component can have a determinate state modified by v-model.

# File loader

The v-progress-linear component is good for translating to the user that they are waiting for a response.

# Toolbar loader

Using the 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.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:11/15/2021, 10:04:14 AM