Progress

The v-progress component is a unified wrapper for linear and circular progress indicators with built-in label and accessible value formatting.

::: warning

This feature requires v4.0.3

:::

Installation

Labs components require manual import and registration with the Vuetify instance.

import { VProgress } from 'vuetify/labs/VProgress'

export default createVuetify({
  components: {
    VProgress,
  },
})

Usage

API

Guide

The v-progress component combines v-progress-linear and v-progress-circular into a single component with a type prop, while adding label support and accessible value formatting.

Props

Label

The label prop displays text alongside the progress indicator. Use the label-position prop to control placement.

Value format

The value-format prop formats the aria-valuetext for screen readers. Use [value], [max], or [percent] as placeholders in strings, or pass a function for custom formatting.

Slots

Label and value

Use the #label and #value slots to fully customize the content displayed alongside the progress indicator. Both slots receive value, max, percent, and formattedValue as scoped props.

Misc

Card loader

Use the #default slot to replace the built-in progress indicator with your own. The slot exposes percent and other scoped props for custom rendering.