Progress

Spring-animated progress bars and rings, with an indeterminate mode for unknown durations.

Uploading assets12%

Playground

Tweak the props, the preview and the code follow.

Props

value60

indeterminate

variant

size

show ring

<Progress value={60} />

npx @plumsydev/plum-ui add progress

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

<Progress value={42} />
<ProgressRing value={42} showValue />

Pass value={null} when you can't measure progress.

Provisioning database…

ProgressRing for compact, circular progress.

64%

Prop	Type	Default
`value` Current value. `null` or omitted renders the indeterminate animation.	`number \| null`	`—`
`max` Maximum value.	`number`	`100`
`variant` Indicator color.	`"default" \| "brand" \| "success" \| "warning" \| "destructive"`	`"default"`
`size` Track height.	`"sm" \| "default" \| "lg"`	`"default"`

Prop	Type	Default
`value*` Current value.	`number`	`—`
`max` Maximum value.	`number`	`100`
`size` Diameter in pixels.	`number`	`48`
`strokeWidth` Ring thickness.	`number`	`4`
`showValue` Displays the animated percentage in the center.	`boolean`	`false`