# Progress - Circular

URL: https://ark-ui.com/docs/components/progress-circular
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/progress-circular.mdx

An element that shows either determinate or indeterminate progress.

---

<ComponentPreview id="ProgressCircular" />

## Anatomy

<Anatomy id="circular-progress" />

```tsx
<Progress.Root>
  <Progress.Label />
  <Progress.ValueText />
  <Progress.Circle>
    <Progress.CircleTrack />
    <Progress.CircleRange />
  </Progress.Circle>
</Progress.Root>
```

## Examples

**Example: basic**

#### React

```tsx
import { Progress } from '@ark-ui/react/progress'
import styles from 'styles/progress-circular.module.css'

export const Basic = () => (
  <Progress.Root className={styles.Root} defaultValue={42}>
    <div className={styles.CircleContainer}>
      <Progress.Circle className={styles.Circle}>
        <Progress.CircleTrack className={styles.CircleTrack} />
        <Progress.CircleRange className={styles.CircleRange} />
      </Progress.Circle>
      <Progress.ValueText className={styles.ValueText} />
    </div>
  </Progress.Root>
)

```

#### Solid

```tsx
import { Progress } from '@ark-ui/solid/progress'
import styles from 'styles/progress-circular.module.css'

export const Basic = () => (
  <Progress.Root class={styles.Root} defaultValue={42}>
    <div class={styles.CircleContainer}>
      <Progress.Circle class={styles.Circle}>
        <Progress.CircleTrack class={styles.CircleTrack} />
        <Progress.CircleRange class={styles.CircleRange} />
      </Progress.Circle>
      <Progress.ValueText class={styles.ValueText} />
    </div>
  </Progress.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Progress } from '@ark-ui/vue/progress'
import styles from 'styles/progress-circular.module.css'
</script>

<template>
  <Progress.Root :class="styles.Root" :defaultValue="42">
    <div :class="styles.CircleContainer">
      <Progress.Circle :class="styles.Circle">
        <Progress.CircleTrack :class="styles.CircleTrack" />
        <Progress.CircleRange :class="styles.CircleRange" />
      </Progress.Circle>
      <Progress.ValueText :class="styles.ValueText" />
    </div>
  </Progress.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Progress } from '@ark-ui/svelte/progress'
  import styles from 'styles/progress-circular.module.css'
</script>

<Progress.Root class={styles.Root} defaultValue={42}>
  <div class={styles.CircleContainer}>
    <Progress.Circle class={styles.Circle}>
      <Progress.CircleTrack class={styles.CircleTrack} />
      <Progress.CircleRange class={styles.CircleRange} />
    </Progress.Circle>
    <Progress.ValueText class={styles.ValueText} />
  </div>
</Progress.Root>

```

### Min and Max

By default, the maximum is `100`. If that's not what you want, you can easily specify a different bound by changing the
value of the `max` prop. You can do the same with the minimum value by setting the `min` prop.

For example, to show the user a progress from `10` to `30`, you can use:

**Example: min-max**

#### React

```tsx
import { Progress } from '@ark-ui/react/progress'
import styles from 'styles/progress-circular.module.css'

export const MinMax = () => (
  <Progress.Root className={styles.Root} defaultValue={20} min={10} max={30}>
    <div className={styles.CircleContainer}>
      <Progress.Circle className={styles.Circle}>
        <Progress.CircleTrack className={styles.CircleTrack} />
        <Progress.CircleRange className={styles.CircleRange} />
      </Progress.Circle>
      <Progress.ValueText className={styles.ValueText} />
    </div>
  </Progress.Root>
)

```

#### Solid

```tsx
import { Progress } from '@ark-ui/solid/progress'

export const MinMax = () => (
  <Progress.Root defaultValue={20} min={10} max={30}>
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Circle>
      <Progress.CircleTrack />
      <Progress.CircleRange />
    </Progress.Circle>
  </Progress.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Progress } from '@ark-ui/vue/progress'
import styles from 'styles/progress-circular.module.css'
</script>

<template>
  <Progress.Root :class="styles.Root" :defaultValue="20" :min="10" :max="30">
    <div :class="styles.CircleContainer">
      <Progress.Circle :class="styles.Circle">
        <Progress.CircleTrack :class="styles.CircleTrack" />
        <Progress.CircleRange :class="styles.CircleRange" />
      </Progress.Circle>
      <Progress.ValueText :class="styles.ValueText" />
    </div>
  </Progress.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Progress } from '@ark-ui/svelte/progress'
  import styles from 'styles/progress-circular.module.css'
</script>

<Progress.Root class={styles.Root} defaultValue={20} min={10} max={30}>
  <div class={styles.CircleContainer}>
    <Progress.Circle class={styles.Circle}>
      <Progress.CircleTrack class={styles.CircleTrack} />
      <Progress.CircleRange class={styles.CircleRange} />
    </Progress.Circle>
    <Progress.ValueText class={styles.ValueText} />
  </div>
</Progress.Root>

```

### Indeterminate

The progress component is determinate by default, with the value and max set to 50 and 100 respectively. To render an
indeterminate progress, you will have to set the `value` to `null`.

**Example: indeterminate**

#### React

```tsx
import { Progress } from '@ark-ui/react/progress'
import styles from 'styles/progress-circular.module.css'

export const Indeterminate = () => (
  <Progress.Root className={styles.Root} defaultValue={null}>
    <div className={styles.CircleContainer}>
      <Progress.Circle className={styles.Circle}>
        <Progress.CircleTrack className={styles.CircleTrack} />
        <Progress.CircleRange className={styles.CircleRange} />
      </Progress.Circle>
      <Progress.ValueText className={styles.ValueText} />
    </div>
  </Progress.Root>
)

```

#### Solid

```tsx
import { Progress } from '@ark-ui/solid/progress'
import styles from 'styles/progress-circular.module.css'

export const Indeterminate = () => (
  <Progress.Root class={styles.Root} defaultValue={null}>
    <div class={styles.CircleContainer}>
      <Progress.Circle class={styles.Circle}>
        <Progress.CircleTrack class={styles.CircleTrack} />
        <Progress.CircleRange class={styles.CircleRange} />
      </Progress.Circle>
      <Progress.ValueText class={styles.ValueText} />
    </div>
  </Progress.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Progress } from '@ark-ui/vue/progress'
import styles from 'styles/progress-circular.module.css'
</script>

<template>
  <Progress.Root :class="styles.Root" :defaultValue="null">
    <div :class="styles.CircleContainer">
      <Progress.Circle :class="styles.Circle">
        <Progress.CircleTrack :class="styles.CircleTrack" />
        <Progress.CircleRange :class="styles.CircleRange" />
      </Progress.Circle>
      <Progress.ValueText :class="styles.ValueText" />
    </div>
  </Progress.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Progress } from '@ark-ui/svelte/progress'
  import styles from 'styles/progress-circular.module.css'
</script>

<Progress.Root class={styles.Root} defaultValue={null}>
  <div class={styles.CircleContainer}>
    <Progress.Circle class={styles.Circle}>
      <Progress.CircleTrack class={styles.CircleTrack} />
      <Progress.CircleRange class={styles.CircleRange} />
    </Progress.Circle>
    <Progress.ValueText class={styles.ValueText} />
  </div>
</Progress.Root>

```

### Label

Add a label to provide additional context for the progress indicator.

**Example: with-label**

#### React

```tsx
import { Progress } from '@ark-ui/react/progress'
import styles from 'styles/progress-circular.module.css'

export const WithLabel = () => (
  <Progress.Root className={styles.Root} defaultValue={42}>
    <Progress.Label className={styles.Label}>Label</Progress.Label>
    <div className={styles.CircleContainer}>
      <Progress.Circle className={styles.Circle}>
        <Progress.CircleTrack className={styles.CircleTrack} />
        <Progress.CircleRange className={styles.CircleRange} />
      </Progress.Circle>
      <Progress.ValueText className={styles.ValueText} />
    </div>
  </Progress.Root>
)

```

#### Solid

```tsx
import { Progress } from '@ark-ui/solid/progress'
import styles from 'styles/progress-circular.module.css'

export const WithLabel = () => (
  <Progress.Root class={styles.Root} defaultValue={42}>
    <Progress.Label class={styles.Label}>Label</Progress.Label>
    <div class={styles.CircleContainer}>
      <Progress.Circle class={styles.Circle}>
        <Progress.CircleTrack class={styles.CircleTrack} />
        <Progress.CircleRange class={styles.CircleRange} />
      </Progress.Circle>
      <Progress.ValueText class={styles.ValueText} />
    </div>
  </Progress.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Progress } from '@ark-ui/vue/progress'
import styles from 'styles/progress-circular.module.css'
</script>

<template>
  <Progress.Root :class="styles.Root" :defaultValue="42">
    <Progress.Label :class="styles.Label">Label</Progress.Label>
    <div :class="styles.CircleContainer">
      <Progress.Circle :class="styles.Circle">
        <Progress.CircleTrack :class="styles.CircleTrack" />
        <Progress.CircleRange :class="styles.CircleRange" />
      </Progress.Circle>
      <Progress.ValueText :class="styles.ValueText" />
    </div>
  </Progress.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Progress } from '@ark-ui/svelte/progress'
  import styles from 'styles/progress-circular.module.css'
</script>

<Progress.Root class={styles.Root} defaultValue={42}>
  <Progress.Label class={styles.Label}>Label</Progress.Label>
  <div class={styles.CircleContainer}>
    <Progress.Circle class={styles.Circle}>
      <Progress.CircleTrack class={styles.CircleTrack} />
      <Progress.CircleRange class={styles.CircleRange} />
    </Progress.Circle>
    <Progress.ValueText class={styles.ValueText} />
  </div>
</Progress.Root>

```

### Root Provider

An alternative way to control the progress is to use the `RootProvider` component and the `useProgress` hook. This way
you can access the state and methods from outside the component.

**Example: root-provider**

#### React

```tsx
import { Progress, useProgress } from '@ark-ui/react/progress'
import button from 'styles/button.module.css'
import styles from 'styles/progress-circular.module.css'

export const RootProvider = () => {
  const progress = useProgress()

  return (
    <div className="stack">
      <button className={button.Root} onClick={() => progress.setToMax()}>
        Set to Max
      </button>
      <Progress.RootProvider className={styles.Root} value={progress}>
        <div className={styles.CircleContainer}>
          <Progress.Circle className={styles.Circle}>
            <Progress.CircleTrack className={styles.CircleTrack} />
            <Progress.CircleRange className={styles.CircleRange} />
          </Progress.Circle>
          <Progress.ValueText className={styles.ValueText} />
        </div>
      </Progress.RootProvider>
    </div>
  )
}

```

#### Solid

```tsx
import { Progress, useProgress } from '@ark-ui/solid/progress'
import button from 'styles/button.module.css'
import styles from 'styles/progress-circular.module.css'

export const RootProvider = () => {
  const progress = useProgress()

  return (
    <div class="stack">
      <button class={button.Root} onClick={() => progress().setToMax()}>
        Set to Max
      </button>
      <Progress.RootProvider class={styles.Root} value={progress}>
        <div class={styles.CircleContainer}>
          <Progress.Circle class={styles.Circle}>
            <Progress.CircleTrack class={styles.CircleTrack} />
            <Progress.CircleRange class={styles.CircleRange} />
          </Progress.Circle>
          <Progress.ValueText class={styles.ValueText} />
        </div>
      </Progress.RootProvider>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Progress, useProgress } from '@ark-ui/vue/progress'
import button from 'styles/button.module.css'
import styles from 'styles/progress-circular.module.css'

const progress = useProgress()
</script>

<template>
  <div class="stack">
    <button :class="button.Root" @click="progress.setToMax()">Set to Max</button>
    <Progress.RootProvider :class="styles.Root" :value="progress">
      <div :class="styles.CircleContainer">
        <Progress.Circle :class="styles.Circle">
          <Progress.CircleTrack :class="styles.CircleTrack" />
          <Progress.CircleRange :class="styles.CircleRange" />
        </Progress.Circle>
        <Progress.ValueText :class="styles.ValueText" />
      </div>
    </Progress.RootProvider>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Progress, useProgress } from '@ark-ui/svelte/progress'
  import button from 'styles/button.module.css'
  import styles from 'styles/progress-circular.module.css'

  const id = $props.id()
  const progress = useProgress({ id })
</script>

<div class="stack">
  <button class={button.Root} onclick={() => progress().setToMax()}>Set to Max</button>
  <Progress.RootProvider class={styles.Root} value={progress}>
    <div class={styles.CircleContainer}>
      <Progress.Circle class={styles.Circle}>
        <Progress.CircleTrack class={styles.CircleTrack} />
        <Progress.CircleRange class={styles.CircleRange} />
      </Progress.Circle>
      <Progress.ValueText class={styles.ValueText} />
    </div>
  </Progress.RootProvider>
</div>

```

## Guides

### Styling the Circle

The circular progress component uses CSS variables to control the size and thickness of the circle. Set these variables
on `Progress.Circle` to customize the appearance:

```css
[data-scope='progress'][data-part='circle'] {
  --size: 120px;
  --thickness: 10px;
}
```

| Variable      | Description                          |
| ------------- | ------------------------------------ |
| `--size`      | The width and height of the circle   |
| `--thickness` | The stroke width of the circle track |

## API Reference

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `number` | No | The initial value of the progress bar when rendered.
Use when you don't need to control the value of the progress bar. |
| `formatOptions` | `NumberFormatOptions` | No | The options to use for formatting the value. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; track: string; label: string; circle: string }>` | No | The ids of the elements in the progress bar. Useful for composition. |
| `locale` | `string` | No | The locale to use for formatting the value. |
| `max` | `number` | No | The maximum allowed value of the progress bar. |
| `min` | `number` | No | The minimum allowed value of the progress bar. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Callback fired when the value changes. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the element. |
| `translations` | `IntlTranslations` | No | The localized messages to use. |
| `value` | `number` | No | The controlled value of the progress bar. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | root |
| `[data-max]` |  |
| `[data-value]` | The value of the item |
| `[data-state]` |  |
| `[data-orientation]` | The orientation of the progress |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--percent` | The percent value for the root |
| `--radius` | The border radius value |
| `--circumference` | The circumference value for the root |
| `--offset` | The offset position of the element |


**Circle Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**CircleRange Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**CircleRange Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | circle-range |
| `[data-state]` |  |


**CircleTrack Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**CircleTrack Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | circle-track |
| `[data-orientation]` | The orientation of the circletrack |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | label |
| `[data-orientation]` | The orientation of the label |


**Range Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Range Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | range |
| `[data-orientation]` | The orientation of the range |
| `[data-state]` |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseProgressReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Track Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**View Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `state` | `ProgressState` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**View Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | view |
| `[data-state]` |  |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `number` | No | The initial value of the progress bar when rendered.
Use when you don't need to control the value of the progress bar. |
| `formatOptions` | `NumberFormatOptions` | No | The options to use for formatting the value. |
| `ids` | `Partial<{ root: string; track: string; label: string; circle: string }>` | No | The ids of the elements in the progress bar. Useful for composition. |
| `locale` | `string` | No | The locale to use for formatting the value. |
| `max` | `number` | No | The maximum allowed value of the progress bar. |
| `min` | `number` | No | The minimum allowed value of the progress bar. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Callback fired when the value changes. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the element. |
| `translations` | `IntlTranslations` | No | The localized messages to use. |
| `value` | `number` | No | The controlled value of the progress bar. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | root |
| `[data-max]` |  |
| `[data-value]` | The value of the item |
| `[data-state]` |  |
| `[data-orientation]` | The orientation of the progress |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--percent` | The percent value for the root |
| `--radius` | The border radius value |
| `--circumference` | The circumference value for the root |
| `--offset` | The offset position of the element |


**Circle Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'svg'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**CircleRange Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'circle'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**CircleRange Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | circle-range |
| `[data-state]` |  |


**CircleTrack Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'circle'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**CircleTrack Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | circle-track |
| `[data-orientation]` | The orientation of the circletrack |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'label'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | label |
| `[data-orientation]` | The orientation of the label |


**Range Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Range Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | range |
| `[data-orientation]` | The orientation of the range |
| `[data-state]` |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseProgressReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Track Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**View Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `state` | `ProgressState` | Yes |  |
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**View Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | view |
| `[data-state]` |  |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `number` | No | The initial value of the progress bar when rendered.
Use when you don't need to control the value of the progress bar. |
| `formatOptions` | `NumberFormatOptions` | No | The options to use for formatting the value. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; track: string; label: string; circle: string }>` | No | The ids of the elements in the progress bar. Useful for composition. |
| `locale` | `string` | No | The locale to use for formatting the value. |
| `max` | `number` | No | The maximum allowed value of the progress bar. |
| `min` | `number` | No | The minimum allowed value of the progress bar. |
| `modelValue` | `number` | No | The v-model value of the progress |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the element. |
| `translations` | `IntlTranslations` | No | The localized messages to use. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | root |
| `[data-max]` |  |
| `[data-value]` | The value of the item |
| `[data-state]` |  |
| `[data-orientation]` | The orientation of the progress |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--percent` | The percent value for the root |
| `--radius` | The border radius value |
| `--circumference` | The circumference value for the root |
| `--offset` | The offset position of the element |


**Circle Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**CircleRange Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**CircleRange Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | circle-range |
| `[data-state]` |  |


**CircleTrack Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**CircleTrack Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | circle-track |
| `[data-orientation]` | The orientation of the circletrack |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | label |
| `[data-orientation]` | The orientation of the label |


**Range Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Range Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | range |
| `[data-orientation]` | The orientation of the range |
| `[data-state]` |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `ProgressApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Track Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**View Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `state` | `ProgressState` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**View Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | view |
| `[data-state]` |  |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `number` | No | The initial value of the progress bar when rendered.
Use when you don't need to control the value of the progress bar. |
| `formatOptions` | `NumberFormatOptions` | No | The options to use for formatting the value. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; track: string; label: string; circle: string }>` | No | The ids of the elements in the progress bar. Useful for composition. |
| `locale` | `string` | No | The locale to use for formatting the value. |
| `max` | `number` | No | The maximum allowed value of the progress bar. |
| `min` | `number` | No | The minimum allowed value of the progress bar. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Callback fired when the value changes. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the element. |
| `ref` | `Element` | No |  |
| `translations` | `IntlTranslations` | No | The localized messages to use. |
| `value` | `number` | No | The controlled value of the progress bar. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | root |
| `[data-max]` |  |
| `[data-value]` | The value of the item |
| `[data-state]` |  |
| `[data-orientation]` | The orientation of the progress |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--percent` | The percent value for the root |
| `--radius` | The border radius value |
| `--circumference` | The circumference value for the root |
| `--offset` | The offset position of the element |


**Circle Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'svg'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**CircleRange Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'circle'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**CircleRange Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | circle-range |
| `[data-state]` |  |


**CircleTrack Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'circle'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**CircleTrack Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | circle-track |
| `[data-orientation]` | The orientation of the circletrack |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `api` | `Snippet<[UseProgressContext]>` | No |  |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | label |
| `[data-orientation]` | The orientation of the label |


**Range Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Range Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | range |
| `[data-orientation]` | The orientation of the range |
| `[data-state]` |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseProgressReturn` | Yes |  |
| `ref` | `Element` | No |  |


**Track Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**View Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `state` | `ProgressState` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**View Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | progress |
| `[data-part]` | view |
| `[data-state]` |  |


## Accessibility

Complies with the [the progressbar role requirements.](https://w3c.github.io/aria/#progressbar).