Progress Circle

PreviousNext

A circular progress indicator component that shows completion status in a visually appealing way.

Component progress-circle-colors not found in registry.

Installation

pnpm dlx shadcn@latest add progress-circle

Usage

import * as ProgressCircle from "@/registry/react-aria/ui/progress-circle"
 
export default function ProgressCircleExample() {
  return (
<ComponentPreview
  name="progress-circle-custom-max"
  description="Progress circles with custom max values"
  framework="react-aria"
/>
    <ProgressCircle.Root value={75} color="primary" size="md">
      75%
    </ProgressCircle.Root>
  )
}

Features

  • Circular design: Beautiful circular progress indicator with smooth animations
  • Color variants: Primary, secondary, danger, success, and warning
  • Size options: xs, sm, md, and lg with appropriate proportions

Component progress-circle-rounded not found in registry.

  • Rounded variants: Choose between rounded or square end caps
  • Flexible content: Support for custom content in the center
  • Accessibility: Built-in ARIA attributes for screen readers
  • SVG-based: Scalable vector graphics for crisp display at any size

Examples

Basic Progress Circle

A standard progress circle with default styling.

<ProgressCircle.Root value={50}>50%</ProgressCircle.Root>

With Color Variants

Use different colors for various contexts.

Component progress-circle-custom-content not found in registry.

<div className="flex gap-4">
  <ProgressCircle.Root value={75} color="primary">
    75%
  </ProgressCircle.Root>
  <ProgressCircle.Root value={60} color="success">
    60%
  </ProgressCircle.Root>
  <ProgressCircle.Root value={45} color="warning">
    45%
  </ProgressCircle.Root>
  <ProgressCircle.Root value={30} color="danger">
    30%
  </ProgressCircle.Root>
</div>

Different Sizes

Choose from various sizes to fit your design needs.

<div className="flex gap-4">
  <ProgressCircle.Root value={50} size="xs">
    50%
  </ProgressCircle.Root>
  <ProgressCircle.Root value={50} size="sm">
    50%
  </ProgressCircle.Root>
  <ProgressCircle.Root value={50} size="md">
    50%
  </ProgressCircle.Root>
  <ProgressCircle.Root value={50} size="lg">
    50%
  </ProgressCircle.Root>
</div>

Different Progress Values

Show various completion states.

<div className="flex gap-4">
  <ProgressCircle.Root value={25}>25%</ProgressCircle.Root>
  <ProgressCircle.Root value={50}>50%</ProgressCircle.Root>
  <ProgressCircle.Root value={75}>75%</ProgressCircle.Root>
  <ProgressCircle.Root value={100}>100%</ProgressCircle.Root>
</div>

Custom Max Values

Use custom ranges for your progress circles.

<div className="flex gap-4">
  <ProgressCircle.Root value={3} max={5}>
    3/5
  </ProgressCircle.Root>
  <ProgressCircle.Root value={7} max={10}>
    7/10
  </ProgressCircle.Root>
  <ProgressCircle.Root value={15} max={20}>
    15/20
  </ProgressCircle.Root>
</div>

Rounded Variants

Control the appearance of the progress indicator ends.

<div className="flex gap-4">
  <ProgressCircle.Root value={75} rounded={true}>
    Rounded
  </ProgressCircle.Root>
  <ProgressCircle.Root value={75} rounded={false}>
    Square
  </ProgressCircle.Root>
</div>

Custom Content

Add custom content in the center of the circle.

<div className="flex gap-4">
  <ProgressCircle.Root value={80} color="success">
    <div className="flex flex-col items-center">
      <span className="text-2xl">✓</span>
      <span className="text-xs">Complete</span>
    </div>
  </ProgressCircle.Root>
 
  <ProgressCircle.Root value={65} color="warning">
    <div className="text-center">
      <div className="font-bold">65%</div>
      <div className="text-xs">In Progress</div>
    </div>
  </ProgressCircle.Root>
 
  <ProgressCircle.Root value={40} color="primary" />
</div>