Progress

Horizontal progress bar. Set modelValue between 0 and 100.

Default

Static progress at 60%.

Import the parts you need from the component's folder.

import { Progress } from "@/components/ui/progress";

Bind to a ref to animate as data loads.

Pair the bar with a caption and percentage row.

Loading…60%

Drive the value from your own state, clamped to 0–100.

40%

Prop	Type	Default	Description
`modelValue`	`number`	`0`	Progress percentage, 0-100. Supports v-model.
`max`	`number`	`100`	Max value.
`class`	`string`	—	Override height or radius of the track.
`indicatorClass`	`string`	—	Override the colour or style of the filled bar.