# ProgressCircle · HeroUI

> A circular progress indicator that shows determinate or indeterminate progress.

- Page: https://jiguang132.com/systems/heroui/docs/components/progress-circle
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## Import

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

### Usage


> Example `progress-circle-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/progress-circle


### Anatomy

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

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

### Sizes


> Example `progress-circle-sizes`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/progress-circle


### Colors


> Example `progress-circle-colors`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/progress-circle


### Indeterminate

Use `isIndeterminate` when progress cannot be determined.


> Example `progress-circle-indeterminate`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/progress-circle


### With Label


> Example `progress-circle-with-label`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/progress-circle


### Custom SVG Props

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


> Example `progress-circle-custom-svg`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/progress-circle


## Styling

### Passing Tailwind CSS classes

You can customize individual ProgressCircle parts:

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

function CustomProgressCircle() {
  return (
    <ProgressCircle aria-label="Loading" value={60}>
      <ProgressCircle.Track>
        <ProgressCircle.TrackCircle />
        <ProgressCircle.FillCircle className="stroke-purple-500" />
      </ProgressCircle.Track>
    </ProgressCircle>
  );
}
```

### Customizing the component classes

To customize the ProgressCircle component classes, you can use the `@layer components` directive.
  
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).

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

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

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

HeroUI follows the [BEM](https://getbem.com/) 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](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/progress-circle.css)):

#### 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 Props

Inherits from [React Aria ProgressBar](https://react-spectrum.adobe.com/react-aria/ProgressBar.html).

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `number` | `0` | The current value |
| `minValue` | `number` | `0` | The minimum value |
| `maxValue` | `number` | `100` | The maximum value |
| `isIndeterminate` | `boolean` | `false` | Whether progress is indeterminate |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Size of the circle |
| `color` | `"default" \| "accent" \| "success" \| "warning" \| "danger"` | `"accent"` | Color of the progress arc |
| `formatOptions` | `Intl.NumberFormatOptions` | `{style: 'percent'}` | Number format for the value display |
| `children` | `ReactNode \| (values: ProgressBarRenderProps) => ReactNode` | - | Content or render prop |

### ProgressBarRenderProps

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

| Prop | Type | Description |
|------|------|-------------|
| `percentage` | `number` | The percentage of the progress (0-100) |
| `valueText` | `string` | The formatted value text |
| `isIndeterminate` | `boolean` | Whether progress is indeterminate |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt