Progress
The v-progress component is a unified wrapper for linear and circular progress indicators with built-in label and accessible value formatting.
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
<v-progress
color="primary"
label="Loading..."
:model-value="50"
></v-progress>API
| Component | Description |
|---|---|
| v-progress | Primary Component |
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.