Progress

A headless progress bar component for building determinate, indeterminate, and buffered loading indicators. Uses createProgress internally, which delegates segment tracking to createModel.

Copy Markdown

PreviewRenderlessIntermediate Apr 6, 2026

Usage

The Progress supports single-value and multi-segment modes. Bind a number for a single bar, or an array for multiple segments.

Anatomy

<script setup lang="ts">
  import { Progress } from '@vuetify/v0'
</script>

<template>
  <Progress.Root>
    <Progress.Label />

    <Progress.Track>
      <Progress.Fill />

      <Progress.Buffer />
    </Progress.Track>

    <Progress.Value />

    <Progress.HiddenInput />
  </Progress.Root>
</template>

Examples

Recipes

Indeterminate State

When no value is provided (or all segment values are 0), the progress is indeterminate. Use data-state to apply CSS animations:

vue

<template>
  <Progress.Root>
    <Progress.Track class="relative h-2 w-full overflow-hidden rounded-full bg-neutral-200">
      <Progress.Fill class="h-full rounded-full bg-blue-500 data-[state=indeterminate]:animate-pulse data-[state=indeterminate]:w-full" />
    </Progress.Track>
  </Progress.Root>
</template>

Custom Value Format

Override the default ${percent}% display via the scoped slot:

vue

<template>
  <Progress.Value v-slot="{ total, percent }">
    {{ total }} of 100 ({{ Math.round(percent) }}%)
  </Progress.Value>
</template>

Form Integration

Set name on Root to auto-render a hidden input for form submission:

vue

<template>
  <Progress.Root v-model="value" name="upload-progress">
    <Progress.Track>
      <Progress.Fill />
    </Progress.Track>
  </Progress.Root>
</template>

Data Attributes

Style states without slot props:

vue

<template>
  <Progress.Fill class="data-[state=indeterminate]:animate-pulse transition-all" />
</template>

Attribute	Values	Components
`data-state`	`determinate`, `indeterminate`	Root, Track, Fill, Buffer
`data-complete`	`true`	Root
`data-buffer`	`true`	Buffer
`data-index`	number	Fill

Accessibility

The Root component manages ARIA attributes automatically.

ARIA Attributes

Attribute	Value	Notes
`role`	`progressbar`	Applied to Root
`aria-valuenow`	Current total	Omitted when indeterminate
`aria-valuemin`	Min value	From Root’s `min` prop (default 0)
`aria-valuemax`	Max value	From Root’s `max` prop (default 100)
`aria-valuetext`	`${percent}%`	Omitted when indeterminate
`aria-labelledby`	Label ID	Links to `Progress.Label`
`aria-busy`	`true`	Set when indeterminate
`data-state`	`determinate` / `indeterminate`	Reflects current mode
`data-complete`	`true`	When total >= max

API Reference

The following API details are for all variations of the Progress component.