# Circular Progress

A small progress ring driven by a value, with an indeterminate spinning state.

## Installation

```tsx
import { CircularProgress } from "@makeplane/propel/components/circular-progress";
```
## Usage

```tsx
import { CircularProgress } from "@makeplane/propel/components/circular-progress";

export default function BasicDemo() {
  return <CircularProgress value={60} size="md" variant="brand" aria-label="Sync progress" />;
}
```
## Examples

### Variants

Arc color by signal: `brand` accent, `success`/`warning`/`danger` outcome.

```tsx
import { CircularProgress } from "@makeplane/propel/components/circular-progress";

export default function VariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <CircularProgress value={60} size="md" variant="brand" aria-label="Sync progress" />
      <CircularProgress value={60} size="md" variant="success" aria-label="Backup progress" />
      <CircularProgress value={60} size="md" variant="warning" aria-label="Storage used" />
      <CircularProgress value={60} size="md" variant="danger" aria-label="Quota used" />
    </div>
  );
}
```

### Sizes

Diameter: `sm` 16px / `md` 20px.

```tsx
import { CircularProgress } from "@makeplane/propel/components/circular-progress";

export default function SizesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <CircularProgress value={60} size="sm" variant="brand" aria-label="Small ring" />
      <CircularProgress value={60} size="md" variant="brand" aria-label="Medium ring" />
    </div>
  );
}
```

### Indeterminate

`indeterminate` ignores `value` and shows a fixed quarter arc that spins, with no `aria-valuenow`.

```tsx
import { CircularProgress } from "@makeplane/propel/components/circular-progress";

export default function IndeterminateDemo() {
  return (
    <CircularProgress value={0} indeterminate size="md" variant="brand" aria-label="Syncing" />
  );
}
```
## API Reference

### CircularProgress

A small progress ring (no label — too small). Drive it with `value` (0–`max`); the arc and
`aria-valuenow` follow. Pass `indeterminate` to ignore `value` and spin a fixed quarter arc
instead. For a bar with an optional label, use `LinearProgress`. Composes the
`elements/circular-progress` primitives on Base UI `Progress`.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` (required) | `number` | — | Completion from 0 to `max` (default 100). Ignored while `indeterminate`. |
| `size` (required) | `"sm" \| "md"` | — | Diameter: `sm` 16px / `md` 20px. |
| `variant` (required) | `"brand" \| "success" \| "warning" \| "danger"` | — | Arc color: `brand` accent, `success`/`warning`/`danger` outcome. |
| `aria-label` | `string` | — | Defines a string value that labels the current element. Accessible name (required). @see aria-labelledby. |
| `indeterminate` | `boolean` | `false` | Spin a fixed quarter arc; `value` is ignored and `aria-valuenow` unset. |