Circular Progress

Shows task progress with a circular indicator.

PreviewCode

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/circular-progress

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

<CircularProgress value={66} />

PreviewCode

PreviewCode

66%

PreviewCode

Establishing connection...

Use the size prop to change the circular progress indicator size.

PreviewCode

Use the thickness prop to control the ring stroke width.

PreviewCode

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.

[

Checkbox ](/docs/components/checkbox)[

Circular Slider ](/docs/components/circular-slider)

On This Page