Progress Circle

Circular progress (React Aria ProgressBar). Determinate or indeterminate.

Import

import { ProgressCircle } from '@marbleui/ui'

Props

<ProgressCircle>

Prop	Type	Default	Description
children	`ReactNode`	`—`	Center content; defaults to the percentage. Pass null for none.
size	`number`	`56`
strokeWidth	`number`	`5`
tone	`'accent' \| 'success' \| 'warning' \| 'danger'`	`'accent'`

Also accepts React Aria props (85).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria ProgressBar. Follow the primitive's docs for the full keyboard map.

Usage notes

Circular progress, determinate or indeterminate. Use where space is tight or for goals and completion. For linear task progress use ProgressBar; for a plain loader use Spinner.

<ProgressCircle aria-label="Onboarding" value={3} maxValue={5} size={96}>
  {() => '3/5'}
</ProgressCircle>

It has no visible label, so always pass aria-label.
value, minValue, maxValue and isIndeterminate come from React Aria ProgressBar. The centre shows the percentage by default; children can be a node or a function of the percentage, and null hides it.
size (default 56) and strokeWidth (default 5) are numbers in px; tone is accent, success, warning or danger.
The centre text is hidden when indeterminate.

Example source · show

import { ProgressCircle } from './progress-circle'

export const styles = {
  Values: () => (
    <div className="flex items-center gap-5">
      <ProgressCircle aria-label="Profile complete" value={25} tone="danger" />
      <ProgressCircle aria-label="Storage" value={60} tone="warning" />
      <ProgressCircle aria-label="Goal" value={92} tone="success" />
    </div>
  ),
  Large: () => (
    <ProgressCircle aria-label="Onboarding" value={3} maxValue={5} size={120} strokeWidth={10}>
      {() => (
        <span className="flex flex-col items-center">
          <span className="text-2xl">3/5</span>
          <span className="text-[10px] font-normal text-fg-muted">steps done</span>
        </span>
      )}
    </ProgressCircle>
  ),
  Indeterminate: () => (
    <div className="flex items-center gap-4">
      <ProgressCircle aria-label="Loading" isIndeterminate size={24} strokeWidth={3} />
      <ProgressCircle aria-label="Loading" isIndeterminate />
    </div>
  ),
}

Source: packages/ui/src/progress-circle/progress-circle.tsx

Catalog

Category: feedback
Priority: Core
Primitive: react-aria
React Aria: ProgressBar
Base UI: Progress