ProgressRing

Circular progress indicators for displaying completion percentages, loading states, or goal progress.

Playground

Experiment with different settings:

<ProgressRing
  data={data}
  theme="midnight"
  value={72}
  size={150}
  strokeWidth={10}
  showValue
/>

Basic Usage

<ProgressRing value={75} theme="midnight" />

Custom Range

Use min and max to define custom value ranges:

<ProgressRing
  value={750}
  min={0}
  max={1000}
  theme="midnight"
  format={(v) => `${v}`}
/>

Custom Center Content

Use children to display custom content in the center:

<ProgressRing value={68} size={140} theme="midnight">
  <div className="text-center">
    <div className="text-2xl font-bold">68%</div>
    <div className="text-xs">Complete</div>
  </div>
</ProgressRing>

Sizes & Stroke Width

Adjust size and strokeWidth for different visual styles:

Custom Colors

Override the theme color with a custom color prop:

Props