# CircularProgress
**Category**: react
**URL**: https://www.heroui.com/docs/react/migration/circular-progress
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/circular-progress.mdx
> Migration guide for CircularProgress from HeroUI v2 to v3 (now ProgressCircle)
***
Refer to the [v3 ProgressCircle documentation](/docs/react/components/progress-circle) for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2.
Looking for the Progress (linear) migration? See the [Progress migration guide](/docs/react/migration/progress).
## Component Rename
`CircularProgress` has been renamed to `ProgressCircle` in v3.
## Structure Changes
In v2, `CircularProgress` was a single component configured with props:
```tsx
import { CircularProgress } from "@heroui/react";
export default function App() {
return (
);
}
```
In v3, `ProgressCircle` uses a compound component pattern:
```tsx
import { ProgressCircle } from "@heroui/react";
export default function App() {
return (
);
}
```
## Key Changes
### 1. Component Structure
**v2:** Single `CircularProgress` component with internal SVG rendering
**v3:** Compound components: `ProgressCircle`, `ProgressCircle.Track` (SVG element), `ProgressCircle.TrackCircle` (background circle), `ProgressCircle.FillCircle` (progress arc)
### 2. Colors
**v2:** `default`, `primary`, `secondary`, `success`, `warning`, `danger`
**v3:** `default`, `accent`, `success`, `warning`, `danger`
### 3. Prop Changes
| v2 Prop | v3 Equivalent | Notes |
|---------|---------------|-------|
| `value` | `value` | Same |
| `minValue` | `minValue` | Same |
| `maxValue` | `maxValue` | Same |
| `isIndeterminate` | `isIndeterminate` | Default changed: `true` in v2 → `false` in v3 |
| `formatOptions` | `formatOptions` | Same |
| `size` | `size` | Same (`sm`, `md`, `lg`) |
| `color` | `color` | `primary` → `accent`, `secondary` removed |
| `label` | - | Use `Label` component |
| `valueLabel` | - | Use render prop pattern |
| `showValueLabel` | - | Place value content inside `ProgressCircle` |
| `strokeWidth` | - | Set `strokeWidth` directly on `ProgressCircle.TrackCircle` and `ProgressCircle.FillCircle` |
| `isDisabled` | - | Removed |
| `disableAnimation` | - | Removed |
| `classNames` | - | Use `className` on individual compound components |
## Migration Examples
### Basic CircularProgress
```tsx
import { CircularProgress } from "@heroui/react";
```
```tsx
import { ProgressCircle } from "@heroui/react";
```
### Indeterminate
```tsx
{/* isIndeterminate defaults to true in v2 */}
```
```tsx
{/* isIndeterminate defaults to false in v3, must be explicit */}
```
### With Label
```tsx
```
```tsx
import { ProgressCircle, Label } from "@heroui/react";
```
### Custom SVG Props
```tsx
```
```tsx
```
## Styling Changes
### v2: `classNames` Prop
```tsx
```
### v3: Direct `className` Props
```tsx
```
## Component Anatomy
```
ProgressCircle (Root)
└── ProgressCircle.Track (SVG element)
├── ProgressCircle.TrackCircle (background circle)
└── ProgressCircle.FillCircle (progress arc)
```
## Summary
1. **Renamed**: `CircularProgress` → `ProgressCircle`
2. **Component Structure**: Single component → compound components (`ProgressCircle.Track`, `ProgressCircle.TrackCircle`, `ProgressCircle.FillCircle`)
3. **Indeterminate Default Changed**: `isIndeterminate` defaults to `false` in v3 (was `true` in v2)
4. **Label**: `label` prop → `Label` component
5. **SVG Props**: `strokeWidth` on root → set directly on `TrackCircle` and `FillCircle`
6. **Color Changes**: `primary` → `accent`, `secondary` removed
7. **Removed Props**: `isDisabled`, `disableAnimation` → use Tailwind CSS
8. **ClassNames Removed**: Use `className` on individual compound components