packages/docs/src/pages/en/components/progress-linear.md
The v-progress-linear component is used to convey data visually to users. It supports both indeterminate amounts, such as loading or processing, and finite amounts of progress (including separate buffer values).
In its simplest form, v-progress-linear displays a horizontal progress bar. Use the value prop to control the progress.
| Component | Description |
|---|---|
| v-progress-linear | Primary Component |
The primary value is controlled by v-model, whereas the buffer is controlled by the buffer-value prop.
<ExamplesExample file="v-progress-linear/prop-buffer-value" />The component can be split into chunks using chunk-count or chunk-width. Visible progress is snapped to the last filled chunk.
::: warning The chunk-count and chunk-width props have no effect when using variant="split". :::
<ExamplesExample file="v-progress-linear/prop-chunks" />You can set the colors of the progress bar using the props color and bg-color.
<ExamplesExample file="v-progress-linear/prop-colors" />Using the indeterminate prop, v-progress-linear continuously animates.
Displays reversed progress. The component also has RTL support, such that a progress bar in right-to-left mode with reverse prop enabled will display left-to-right.
<ExamplesExample file="v-progress-linear/prop-reverse" />The rounded prop is used to apply a border radius to the v-progress-linear component.
::: info Use the rounded-bar property to add a border-radius to the inner edges of value bar. By default, the value bar's border-radius is equal to the default border-radius of your application unless a different value is provided by the rounded prop or SASS variable. :::
The stream property works with buffer-value to convey to the user that there is some action taking place.
<ExamplesExample file="v-progress-linear/prop-stream" />This applies a striped background over the value portion of the v-progress-linear. This prop has no effect when using indeterminate.
Default slot exposes current value as percentage (0–100) in relation to max prop (100 by default). It is recommended to round it in order to avoid JavaScript floating point number representation with lots of decimal digits. You can use Math.round() or .toFixed() to render the value correctly.
The progress linear component can have a determinate state modified by v-model.
<ExamplesExample file="v-progress-linear/misc-determinate" />The v-progress-linear component is good for communicating to the user that they are waiting for a response.
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.
The buffer color and opacity can be controlled using the buffer-color and buffer-opacity props. This enables you to make multi colored progress bars.
<ExamplesExample file="v-progress-linear/misc-buffer-color" />