Progress Circle

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/progress-circle

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components tailwind-merge

Anatomy

import { ProgressCircle } from "@/components/ui/progress-circle"

<ProgressCircle aria-label="Loading…" value={25} />

Examples

Indeterminate

You can also make the progress circle indeterminate by setting the isIndeterminate prop.

Custom size

You can customize the size of the progress circle by using className with tailwind classes or style props.

Controlled

You can control the progress circle by using the value prop.

Combine with button

The button includes an isPending prop to indicate a pending state, allowing for seamless integration with the progress circle.

Custom color

The progress circle can be customized with the color prop.

Component API

The ProgressCircle component displays circular progress feedback.

See the React Aria for the full API reference.