---
title: CircleProgress
description: "`CircleProgress` is a component that displays progress in a circular progress bar."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/circle-progress/circle-progress.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/circle-progress
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-circleprogress--basic
---

# CircleProgress

`CircleProgress` is a component that displays progress in a circular progress bar.

```tsx
<CircleProgress.Root value={75} />
```

## Usage

```tsx
import { CircleProgress } from "@yamada-ui/react"
```

```tsx
import { CircleProgress } from "@/components/ui"
```

```tsx
import { CircleProgress } from "@workspaces/ui"
```

```tsx
<CircleProgress.Root>
  <CircleProgress.Label />
</CircleProgress.Root>
```

### Change Variant

```tsx
<Wrap gap="md">
  <For each={["outline", "subtle"]}>
    {(variant, index) => (
      <CircleProgress.Root value={75} variant={variant} key={index} />
    )}
  </For>
</Wrap>
```

### Change Size

```tsx
<Wrap gap="md">
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size, index) => (
      <CircleProgress.Root value={75} size={size} key={index} />
    )}
  </For>
</Wrap>
```

Alternatively, set a string or number to `boxSize`.

```tsx
<CircleProgress.Root boxSize="100px" value={31} />
```

### Change Color Scheme

```tsx
<Wrap gap="md">
  <For each={["success", "warning"]}>
    {(colorScheme, index) => (
      <CircleProgress.Root value={75} colorScheme={colorScheme} key={index} />
    )}
  </For>
</Wrap>
```

### Change Shape

```tsx
<Wrap gap="md">
  <For each={["rounded", "square"]}>
    {(shape, index) => (
      <CircleProgress.Root value={75} shape={shape} key={index} />
    )}
  </For>
</Wrap>
```

### Apply Animation

Setting `value` to `null` will apply animation.

```tsx
<CircleProgress.Root value={null} />
```

### Change Animation Duration

Set a number to `duration`.

```tsx
<CircleProgress.Root duration={2} value={null} />
```

### Change Thickness

To change the thickness of the progress bar, set a string or number to `thickness`.

```tsx
<CircleProgress.Root thickness={1} value={31} />
```

### Add Label

```tsx
<CircleProgress.Root value={75}>
  <CircleProgress.Label>75%</CircleProgress.Label>
</CircleProgress.Root>
```

### Change Color

```tsx
<CircleProgress.Root rangeColor="red.500" trackColor="blue.500" value={31} />
```

## Props

### CircleProgress.Root

| Prop          | Default     | Type                                                                                                                                                                        | Description                                                               |
| ------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| `as`          | -           | `As`                                                                                                                                                                        | The HTML element to render.                                               |
| `asChild`     | -           | `boolean`                                                                                                                                                                   | Merges its props onto its immediate child.                                |
| `css`         | -           | `CSSObject \| CSSObject[]`                                                                                                                                                  | The CSS object.                                                           |
| `colorScheme` | -           | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                                   | Set color scheme variables.                                               |
| `size`        | `"md"`      | `"lg" \| "md" \| "sm" \| "xl" \| "xs"`                                                                                                                                      | The size of the component.                                                |
| `variant`     | `"outline"` | `"outline" \| "subtle"`                                                                                                                                                     | The variant of the component.                                             |
| `circleProps` | -           | `CircleProgressCircleProps`                                                                                                                                                 | Props for the progress circle element.                                    |
| `duration`    | -           | `number \| string`                                                                                                                                                          | The animation duration in seconds.                                        |
| `max`         | `100`       | `number`                                                                                                                                                                    | The maximum value of the progress.                                        |
| `min`         | `0`         | `number`                                                                                                                                                                    | The minimum value of the progress.                                        |
| `rangeColor`  | -           | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The color of the progress range.                                          |
| `rangeProps`  | -           | `CircleProgressRangeProps`                                                                                                                                                  | Props for the progress range element.                                     |
| `thickness`   | -           | `"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` | The thickness of the progress bar.                                        |
| `trackColor`  | -           | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The color of the progress track.                                          |
| `trackProps`  | -           | `CircleProgressTrackProps`                                                                                                                                                  | Props for the progress track element.                                     |
| `value`       | `0`         | `null \| number`                                                                                                                                                            | The value of the progress. If `null`, the progress will be indeterminate. |

### CircleProgress.Label

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

## Accessibility

If `aria-label` or `aria-labelledby` is set on `CircleProgress.Root`'s `circleProps`, it will be announced by screen readers.

```tsx
<CircleProgress.Root
  value={88}
  circleProps={{ "aria-label": "Central Processing Unit (CPU) Usage" }}
/>
```

```tsx
<VStack gap="sm">
  <Text as="h3" id="label">
    Central Processing Unit (CPU) Usage
  </Text>

  <CircleProgress.Root
    value={88}
    circleProps={{ "aria-labelledby": "label" }}
  />
</VStack>
```

### ARIA Roles and Attributes

| Element                          | Roles and Attributes | Usage                                                                                                                                 |
| -------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| `svg.ui-circle-progress__circle` | `role="progressbar"` | Indicates that it is a progress bar.                                                                                                  |
|                                  | `aria-label`         | Sets `"Loading..."` when `value` is `null` (indeterminate); otherwise sets the current progress percentage like `"18 percent"`.       |
|                                  | `aria-valuemin`      | Sets the minimum value. Default is `0`.                                                                                               |
|                                  | `aria-valuemax`      | Sets the maximum value. Default is `100`.                                                                                             |
|                                  | `aria-valuenow`      | Sets the current value only when the progress is determinate (`value` is not `null`); omitted when `value` is `null` (indeterminate). |

## Similar Components

- [Progress](https://yamada-ui.com/docs/components/progress.md): `Progress` is a component for visually indicating progress.
- [EmptyState](https://yamada-ui.com/docs/components/empty-state.md): `EmptyState` is a component used to display when a resource is empty or unavailable.
- [Loading](https://yamada-ui.com/docs/components/loading.md): `Loading` is a component displayed during waiting times, such as when data is being loaded.
- [Alert](https://yamada-ui.com/docs/components/alert.md): `Alert` is a component that conveys information to the user.
- [Skeleton](https://yamada-ui.com/docs/components/skeleton.md): `Skeleton` is a component that acts as a placeholder until content is loaded.
- [Snacks](https://yamada-ui.com/docs/components/snacks.md): `Snacks` is a component for controlling notifications used in forms and other similar situations.
- [Status](https://yamada-ui.com/docs/components/status.md): `Status` is component that indicate the status of a process or state.

## Uses Components & Hooks

- [Progress](https://yamada-ui.com/docs/components/progress.md): `Progress` is a component for visually indicating progress.