ProgressCircle

Display circular progress indicators for loading states and completion metrics.

Import


import { ProgressCircle } from "@raydenui/ui";

Usage

Basic

65%


<ProgressCircle value={65} />

Sizes

50%


<ProgressCircle size="xs" value={50} />  {/* 48px */}
<ProgressCircle size="sm" value={50} />  {/* 56px */}
<ProgressCircle size="md" value={50} />  {/* 72px */}
<ProgressCircle size="lg" value={50} />  {/* 90px */}
<ProgressCircle size="xl" value={50} />  {/* 120px */}

Segmented Variant

Display progress as 10 discrete segments with gaps.

70%


<ProgressCircle variant="segmented" value={70} />

Show/Hide Text

75%


// With percentage (default)
<ProgressCircle value={75} showText />
 
// Without percentage
<ProgressCircle value={75} showText={false} />

Variants Comparison

60%

Default

60%

Segmented


<div className="flex gap-8">
  <div className="text-center">
    <ProgressCircle variant="default" value={60} />
    <p className="mt-2 text-sm">Default</p>
  </div>
  <div className="text-center">
    <ProgressCircle variant="segmented" value={60} />
    <p className="mt-2 text-sm">Segmented</p>
  </div>
</div>

Props

Prop	Type	Default	Description
`value`	`number`	`0`	Progress value (0-100)
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Circle size
`variant`	`"default" \| "segmented"`	`"default"`	Continuous or segmented style
`showText`	`boolean`	`true`	Show percentage in center
`className`	`string`	—	Additional CSS classes

Size Reference

Size	Dimension	Stroke Width	Font Size
`xs`	48px	4px	12px
`sm`	56px	5px	12px
`md`	72px	6px	14px
`lg`	90px	7px	16px
`xl`	120px	8px	18px

Accessibility

Uses SVG with role="progressbar"
aria-valuenow, aria-valuemin, aria-valuemax set correctly
Center percentage is visible and accessible