# @askrjs/ui/progress-circle

> Published API exports for @askrjs/ui/progress-circle.

Source: [https://askrjs.com/docs/reference/api/ui/progress-circle](https://askrjs.com/docs/reference/api/ui/progress-circle)

Status: stable. Packages: @askrjs/ui/progress-circle.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 8 exports from the declarations shipped by @askrjs/ui.

### `PROGRESS_CIRCLE_A11Y_CONTRACT`

```ts
PROGRESS_CIRCLE_A11Y_CONTRACT: { readonly ROLE: "progressbar"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly percentage: "data-percentage"; }; readonly VALUE_NOW_ATTRIBUTE: "aria-valuenow"; readonly VALUE_MIN_ATTRIBUTE: "aria-valuemin"; readonly VALUE_MAX_ATTRIBUTE: "aria-valuemax"; readonly INDICATOR_MARKER: "data-progress-circle-indicator"; }
```

WAI-ARIA progressbar contract for circular progress.

### `ProgressCircle`

```ts
ProgressCircle: (props: ProgressCircleProps) => JSX.Element
```

Headless circular progress indicator root.

Normalizes value/max, computes percentage, exposes `--ak-progress-percentage`
as a dynamically injected CSS custom property, and provides progress state
to `ProgressCircleIndicator` via context.

### `ProgressCircleA11yContract`

```ts
ProgressCircleA11yContract: typeof PROGRESS_CIRCLE_A11Y_CONTRACT
```

Type of the Progress Circle A11y Contract object.

### `ProgressCircleIndicator`

```ts
ProgressCircleIndicator: { (props: ProgressCircleIndicatorProps): JSX.Element; (props: ProgressCircleIndicatorAsChildProps): JSX.Element; }
```

Visual indicator for `ProgressCircle`, rendering the fill/arc element.
Must be used within a `ProgressCircle`; reads progress state from context
and exposes it as `data-state`/`data-value`/`data-max`/`data-percentage`.

### `ProgressCircleIndicatorAsChildProps`

```ts
ProgressCircleIndicatorAsChildProps: BoxAsChildProps
```

Props for `ProgressCircleIndicator` rendered polymorphically via `asChild`.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `ProgressCircleIndicatorProps`

```ts
ProgressCircleIndicatorProps: BoxProps<'div', HTMLDivElement>
```

Props for `ProgressCircleIndicator` rendered as a native `div`.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `ProgressCircleOwnProps`

```ts
ProgressCircleOwnProps: {
  children?: unknown;
  id?: string;
  value?: number | null;
  max?: number;
  getValueLabel?: (value: number | null, max: number) => string;
}
```

Props specific to `ProgressCircle`, before merging with native `div` attributes.

- `children`: children?: unknown;

- `getValueLabel`: getValueLabel?: ((value: number | null, max: number) => string) | undefined;

- `id`: id?: string | undefined;

- `max`: max?: number | undefined;

- `value`: value?: number | null | undefined;

### `ProgressCircleProps`

```ts
ProgressCircleProps: BoxProps<'div', HTMLDivElement> & ProgressCircleOwnProps
```

Props for `ProgressCircle`, combining native `div` attributes with `ProgressCircleOwnProps`.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `getValueLabel`: getValueLabel?: ((value: number | null, max: number) => string) | undefined;

- `id`: id?: string | undefined;

- `max`: max?: number | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `value`: value?: number | null | undefined;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/progress/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/radio-group/index.md)