Progress

Feedback

Visual indicators for task completion or loading progress. Use progress bars to show determinate progress or loading states.

Import

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

Standard horizontal progress bar

Uploading...

Processing75%

Different sizes for various contexts

Small

Medium

Large

Circular progress indicator

50%

75%

Progress at various completion levels

Not started0%

In progress33%

Completed100%

value*—

number

Current progress value (0-100)

max100

number

Maximum value

label—

string

Label text above the progress bar

showValuefalse

boolean

Display the current value

size"md"

"sm" | "md" | "lg"

Size of the progress indicator

Prop	Type	Default	Description
`value*`	`number`	—	Current progress value (0-100)
`max`	`number`	100	Maximum value
`label`	`string`	—	Label text above the progress bar
`showValue`	`boolean`	false	Display the current value
`size`	`"sm" \| "md" \| "lg"`	"md"	Size of the progress indicator