Skip to main content

​
VProgressLinear

The VProgressLinear component is used to convey data visually to users. It can be used in a variety of scenarios including displaying determinate or indeterminate progress, buffer states, and more.

​
Usage

The simplest form displays an indeterminate progress indicator. 
<template>
  <v-progress-linear indeterminate></v-progress-linear>
</template>

​
Determinate

The progress linear can represent a determinate state using the modelValue prop. 
<template>
  <v-progress-linear
    v-model="progress"
  ></v-progress-linear>
</template>

<script setup>
import { ref } from 'vue'

const progress = ref(45)
</script>

​
Buffer

A buffer state can be displayed using the bufferValue prop. 
<template>
  <v-progress-linear
    :model-value="value"
    :buffer-value="bufferValue"
  ></v-progress-linear>
</template>

<script setup>
import { ref } from 'vue'

const value = ref(45)
const bufferValue = ref(75)
</script>
The buffer value should typically be greater than the model value to show the buffered portion ahead of the current progress.

​
Color

You can customize the color of the progress bar. 
<template>
  <div>
    <v-progress-linear color="primary" :model-value="50"></v-progress-linear>
    <v-progress-linear color="success" :model-value="60"></v-progress-linear>
    <v-progress-linear color="warning" :model-value="70"></v-progress-linear>
    <v-progress-linear color="error" :model-value="80"></v-progress-linear>
  </div>
</template>

​
Background Color

Set the background color independently from the progress bar color. 
<template>
  <v-progress-linear
    :model-value="50"
    color="primary"
    bg-color="grey-lighten-3"
  ></v-progress-linear>
</template>

​
Height

Customize the height of the progress bar. 
<template>
  <div>
    <v-progress-linear :model-value="50" height="4"></v-progress-linear>
    <v-progress-linear :model-value="50" height="10"></v-progress-linear>
    <v-progress-linear :model-value="50" height="20"></v-progress-linear>
  </div>
</template>

​
Rounded

The rounded prop adds rounded corners to the progress bar. 
<template>
  <v-progress-linear
    :model-value="50"
    rounded
    height="10"
  ></v-progress-linear>
</template>

​
Rounded Bar

The roundedBar prop adds rounded caps to the progress indicator itself. 
<template>
  <v-progress-linear
    :model-value="50"
    rounded-bar
    height="10"
  ></v-progress-linear>
</template>

​
Striped

The striped prop adds a striped pattern to the progress bar. 
<template>
  <v-progress-linear
    :model-value="50"
    striped
    height="10"
  ></v-progress-linear>
</template>

​
Stream

The stream prop adds a streaming animation to indicate buffering. 
<template>
  <v-progress-linear
    :model-value="30"
    :buffer-value="60"
    stream
  ></v-progress-linear>
</template>

​
Reverse

Reverse the direction of the progress bar. 
<template>
  <v-progress-linear
    :model-value="50"
    reverse
  ></v-progress-linear>
</template>
The reverse prop is particularly useful for RTL (right-to-left) layouts and automatically adapts to the locale direction.

​
Default Slot

Display content over the progress bar using the default slot. 
<template>
  <v-progress-linear
    :model-value="value"
    height="25"
    color="primary"
  >
    <template v-slot:default="{ value }">
      <strong>{{ Math.ceil(value) }}%</strong>
    </template>
  </v-progress-linear>
</template>

<script setup>
import { ref } from 'vue'

const value = ref(75)
</script>

​
Location

Position the progress bar at the top or bottom of its container. 
<template>
  <v-sheet height="200" class="position-relative">
    <!-- Top -->
    <v-progress-linear
      :model-value="50"
      location="top"
      absolute
    ></v-progress-linear>
    
    <!-- Bottom -->
    <v-progress-linear
      :model-value="50"
      location="bottom"
      absolute
    ></v-progress-linear>
  </v-sheet>
</template>

​
Clickable

Make the progress bar interactive with the clickable prop. 
<template>
  <v-progress-linear
    v-model="progress"
    clickable
  ></v-progress-linear>
</template>

<script setup>
import { ref } from 'vue'

const progress = ref(0)
</script>

​
Props

​
modelValue
number | string
default:"0"
The percentage value for progress (0-100).
​
indeterminate
boolean
default:"false"
Displays linear progress in an indeterminate state.
​
active
boolean
default:"true"
Controls whether the progress bar is visible and active.
​
bufferValue
number | string
default:"0"
The percentage value for the buffer (0-100).
​
color
string
Applies specified color to the progress bar.
​
bgColor
string
Applies specified color to the background of the progress bar.
​
bufferColor
string
Applies specified color to the buffer portion.
​
bgOpacity
number | string
Sets the opacity of the background.
​
bufferOpacity
number | string
Sets the opacity of the buffer.
​
height
number | string
default:"4"
Sets the height of the progress bar.
​
max
number | string
default:"100"
Sets the maximum value for the progress bar.
​
reverse
boolean
default:"false"
Displays the progress bar in reverse (right to left).
​
stream
boolean
default:"false"
Displays a stream animation indicating buffering.
​
striped
boolean
default:"false"
Adds a striped pattern to the progress bar.
​
roundedBar
boolean
default:"false"
Adds rounded caps to the progress indicator.
​
rounded
string | number | boolean
Designates the border-radius applied to the component.
​
clickable
boolean
default:"false"
Allows clicking on the progress bar to set the value.
​
absolute
boolean
default:"false"
Positions the progress bar absolutely within its container.
​
location
'top' | 'bottom'
default:"top"
Specifies the location of the progress bar when using absolute positioning.
​
tag
string
default:"div"
Specify a custom HTML tag to use for the component.

​
Slots

​
default
{ value: number, buffer: number }
The default Vue slot for content overlaying the progress bar. Receives current value and buffer as slot props.

​
Events

​
update:modelValue
(value: number) => void
Emitted when the progress value changes (when clickable is enabled).

​
Accessibility

The component automatically includes ARIA attributes:
  • role="progressbar"
  • aria-valuemin="0"
  • aria-valuemax (based on the max prop)
  • aria-valuenow (only for determinate progress)
  • aria-hidden (based on the active state)

Build docs developers (and LLMs) love

Get started for freeTalk to us