Circular Progress Bar

Circular Progress Bars visualize progress or loading states in a compact circular format. They support three sizes and an optional percentage label.

Circular Progress Bar Playground

Preview

Code

65%

Controls

Progress (65%)

Size:

Small

Default

Large

Label:

You can add the circular progress bar component to your project manually:

npm

pnpm

yarn

bun

npm install @react-aria/progress

CircularProgressBar.tsx

Loading source code...

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

A simple circular progress indicator:

import { CircularProgressBar } from '@versaui/ui/components/ProgressBar';

<CircularProgressBar value={75} />

Three sizes available — small (40px), default (48px), and large (64px):

<CircularProgressBar size="small" value={30} />
<CircularProgressBar size="default" value={50} />
<CircularProgressBar size="large" value={80} />

The percentage label can be hidden for a cleaner appearance:

<CircularProgressBar value={65} showLabel={false} />

Uses role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
Accessible label via aria-label prop
Visual percentage complements the semantic role

Prop	Type	Default	Description
`value`	`number`	`0`	Completion percentage (0–100). Clamped automatically.
`size`	`'large' \| 'default' \| 'small'`	`'default'`	Progress bar size.
`showLabel`	`boolean`	`true`	Show percentage label in center.
`className`	`string`	`''`	Additional CSS classes.
`aria-label`	`string`	`'Progress'`	Accessible label for screen readers.