ProgressCircle

Usage

import { ProgressCircle } from '@heroui/react';

Anatomy

import { ProgressCircle } from '@heroui/react';

export default () => (
  <ProgressCircle aria-label="Loading" value={60}>
    <ProgressCircle.Track>
      <ProgressCircle.TrackCircle />
      <ProgressCircle.FillCircle />
    </ProgressCircle.Track>
  </ProgressCircle>
);

Examples

Sizes

Colors

Indeterminate

Use isIndeterminate when progress cannot be determined.

With Label

Custom SVG Props

Since each part is a composable component, you can override SVG attributes like strokeWidth, r, cx, cy, and viewBox directly.

Customization

Tailwind CSS

Global CSS

To customize the ProgressCircle component classes, you can use the @layer components directive. Learn more.

@layer components {
  .progress-circle {
    @apply inline-flex;
  }

  .progress-circle__track {
    @apply size-12;
  }

  .progress-circle__fill-circle {
    stroke: purple;
  }
}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The ProgressCircle component uses these CSS classes (View source styles):

Base & Element Classes

• .progress-circle - Base container
• .progress-circle__track - SVG element
• .progress-circle__track-circle - Background circle
• .progress-circle__fill-circle - Progress arc

Size Classes

• .progress-circle--sm - Small size variant
• .progress-circle--md - Medium size variant (default)
• .progress-circle--lg - Large size variant

Color Classes

• .progress-circle--default - Default color variant
• .progress-circle--accent - Accent color variant
• .progress-circle--success - Success color variant
• .progress-circle--warning - Warning color variant
• .progress-circle--danger - Danger color variant

API Reference

ProgressCircle

Inherits from React Aria ProgressBar.

Render Props

When using the render prop pattern, these values are provided:

Related Components