# CircularProgress

Represents determinate or indeterminate progress in a ring.

## Import

```ts
import { CircularProgress } from '@astryx-vue/lab'
```

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` | `undefined` | Current value; ignored in indeterminate mode. |
| `max` | `number` | `100` | Maximum value. |
| `label` | `string` | Required | Accessible name. |
| `isLabelHidden` | `boolean` | `true` | Hides the label visually while keeping it available to screen readers. |
| `hasValueLabel` | `boolean` | `false` | Shows the value in the center. |
| `formatValueLabel` | `(value, max) => string` | Percentage | Custom center-value formatter. |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Ring size. |
| `variant` | `'accent' \| 'success' \| 'warning' \| 'error' \| 'neutral'` | `'accent'` | Semantic color. |
| `isIndeterminate` | `boolean` | `false` | Shows indeterminate animation. |
| `isDisabled` | `boolean` | `false` | Uses disabled colors. |

Use the default slot to replace the center content. `value` and `hasValueLabel` are ignored when `isIndeterminate` is enabled.