Circular Progress

Displays the status of a task in a circular indicator.

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/circular-progress.json


import { CircularProgress } from "@/components/ui/circular-progress";


<CircularProgress value={66} />

Use value to control the progress manually.

Use <CircularProgressValue /> to render the current value text.

66%

Use the indeterminate prop when the completion percentage is unknown.

Use the size prop to set the circle diameter in pixels.

Use the thickness prop to control the ring stroke width.

Root element of the circular progress indicator.

Prop	Type	Default
`value`	`number \| null`	-
`defaultValue`	`number`	-
`onValueChange`	`(details: ValueChangeDetails) => void`	-
`indeterminate`	`boolean`	`false`
`size`	`number`	`32`
`thickness`	`number`	`4`
`className`	`string`	-

Displays the current progress value text.

Prop	Type	Default
`className`	`string`	-

For a complete list of props, see the Ark UI documentation.

On This Page