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

```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} />
```

## Uses Components & Hooks

<Uses name="circle-progress" />

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

Setting `aria-label` or `aria-labelledby` on `CircleProgress.Root` will make it readable by screen readers.

```tsx
<CircleProgress.Root
  value={88}
  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} aria-labelledby="label" />
</VStack>
```

### ARIA Roles and Attributes

| Component              | Role and Attribute   | Usage                                                                      |
| ---------------------- | -------------------- | -------------------------------------------------------------------------- |
| `CircleProgressCircle` | `role="progressbar"` | Indicates that it is a progress bar.                                       |
|                        | `aria-label`         | Set the label that describes the current progress, such as `"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.                                                    |