# Progress: Circle

> `<ProgressCircle />` draws the same value as a ring, starting at the top. Children sit in the middle, which fits `<ProgressValue />` at `lg` and `xl`.

Example: https://hextaui.com/docs/progress/examples/circle
Component docs: https://hextaui.com/docs/progress.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/progress-circle.json
```

This adds `components/examples/progress/circle.tsx` with the Progress component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/progress/circle.tsx"
import { ProgressCircle, ProgressValue } from "@/components/ui/progress"

export function ProgressCircleDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-8">
      <ProgressCircle value={25} size="sm" aria-label="Small" />
      <ProgressCircle value={50} aria-label="Default" />
      <ProgressCircle value={75} size="lg" aria-label="Large">
        <ProgressValue />
      </ProgressCircle>
      <ProgressCircle value={100} size="xl" aria-label="Extra large">
        <ProgressValue />
      </ProgressCircle>
    </div>
  )
}
```

## Props in this example

### ProgressCircle

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number \| null` | – | null spins an arc. |
| `size` | `"sm" \| "default" \| "lg" \| "xl"` | `"default"` |  |

## More Progress examples

- [Sizes](https://hextaui.com/docs/progress/examples/sizes.md)
- [Status](https://hextaui.com/docs/progress/examples/variants.md)
- [Segments](https://hextaui.com/docs/progress/examples/segments.md)
- [Indeterminate](https://hextaui.com/docs/progress/examples/indeterminate.md)
- [Indeterminate circle](https://hextaui.com/docs/progress/examples/circle-indeterminate.md)
- [Custom range and format](https://hextaui.com/docs/progress/examples/format.md)
- [Animated value](https://hextaui.com/docs/progress/examples/number-flow.md)
- [Long labels](https://hextaui.com/docs/progress/examples/files.md)
- [Without a visible label](https://hextaui.com/docs/progress/examples/unlabeled.md)
- [Right to left](https://hextaui.com/docs/progress/examples/rtl.md)