# Progress - Linear

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

An element that shows either determinate or indeterminate progress.

---

<ComponentPreview id="ProgressLinear" />

## Anatomy

<Anatomy id="linear-progress" />

```tsx
<Progress.Root>
  <Progress.Label />
  <Progress.ValueText />
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
</Progress.Root>
```

## Examples

**Example: basic**

#### React

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

export const Basic = () => (
  <Progress.Root className={styles.Root} defaultValue={42}>
    <Progress.Label className={styles.Label}>Label</Progress.Label>
    <Progress.ValueText className={styles.ValueText} />
    <Progress.Track className={styles.Track}>
      <Progress.Range className={styles.Range} />
    </Progress.Track>
  </Progress.Root>
)

```

#### Solid

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

export const Basic = () => (
  <Progress.Root class={styles.Root} defaultValue={42}>
    <Progress.Label class={styles.Label}>Label</Progress.Label>
    <Progress.ValueText class={styles.ValueText} />
    <Progress.Track class={styles.Track}>
      <Progress.Range class={styles.Range} />
    </Progress.Track>
  </Progress.Root>
)

```

#### Vue

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

<template>
  <Progress.Root :class="styles.Root" :defaultValue="42">
    <Progress.Label :class="styles.Label">Label</Progress.Label>
    <Progress.ValueText :class="styles.ValueText" />
    <Progress.Track :class="styles.Track">
      <Progress.Range :class="styles.Range" />
    </Progress.Track>
  </Progress.Root>
</template>

```

#### Svelte

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

<Progress.Root class={styles.Root} defaultValue={42}>
  <Progress.Label class={styles.Label}>Label</Progress.Label>
  <Progress.ValueText class={styles.ValueText} />
  <Progress.Track class={styles.Track}>
    <Progress.Range class={styles.Range} />
  </Progress.Track>
</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.module.css'

export const MinMax = () => (
  <Progress.Root className={styles.Root} defaultValue={20} min={10} max={30}>
    <Progress.Label className={styles.Label}>Label</Progress.Label>
    <Progress.ValueText className={styles.ValueText} />
    <Progress.Track className={styles.Track}>
      <Progress.Range className={styles.Range} />
    </Progress.Track>
  </Progress.Root>
)

```

#### Solid

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

export const MinMax = () => (
  <Progress.Root class={styles.Root} defaultValue={20} min={10} max={30}>
    <Progress.Label class={styles.Label}>Label</Progress.Label>
    <Progress.ValueText class={styles.ValueText} />
    <Progress.Track class={styles.Track}>
      <Progress.Range class={styles.Range} />
    </Progress.Track>
  </Progress.Root>
)

```

#### Vue

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

<template>
  <Progress.Root :class="styles.Root" :defaultValue="20" :min="10" :max="30">
    <Progress.Label :class="styles.Label">Label</Progress.Label>
    <Progress.ValueText :class="styles.ValueText" />
    <Progress.Track :class="styles.Track">
      <Progress.Range :class="styles.Range" />
    </Progress.Track>
  </Progress.Root>
</template>

```

#### Svelte

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

<Progress.Root class={styles.Root} defaultValue={20} min={10} max={30}>
  <Progress.Label class={styles.Label}>Label</Progress.Label>
  <Progress.ValueText class={styles.ValueText} />
  <Progress.Track class={styles.Track}>
    <Progress.Range class={styles.Range} />
  </Progress.Track>
</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.module.css'

export const Indeterminate = () => (
  <Progress.Root className={styles.Root} defaultValue={null}>
    <Progress.Label className={styles.Label}>Label</Progress.Label>
    <Progress.ValueText className={styles.ValueText} />
    <Progress.Track className={styles.Track}>
      <Progress.Range className={styles.Range} />
    </Progress.Track>
  </Progress.Root>
)

```

#### Solid

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

export const Indeterminate = () => (
  <Progress.Root class={styles.Root} value={null}>
    <Progress.Label class={styles.Label}>Label</Progress.Label>
    <Progress.ValueText class={styles.ValueText} />
    <Progress.Track class={styles.Track}>
      <Progress.Range class={styles.Range} />
    </Progress.Track>
  </Progress.Root>
)

```

#### Vue

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

<template>
  <Progress.Root :class="styles.Root" :defaultValue="null">
    <Progress.Label :class="styles.Label">Label</Progress.Label>
    <Progress.ValueText :class="styles.ValueText" />
    <Progress.Track :class="styles.Track">
      <Progress.Range :class="styles.Range" />
    </Progress.Track>
  </Progress.Root>
</template>

```

#### Svelte

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

<Progress.Root class={styles.Root} defaultValue={null}>
  <Progress.Label class={styles.Label}>Label</Progress.Label>
  <Progress.ValueText class={styles.ValueText} />
  <Progress.Track class={styles.Track}>
    <Progress.Range class={styles.Range} />
  </Progress.Track>
</Progress.Root>

```

### Value Text

Progress bars can only be interpreted by sighted users. To include a text description to support assistive technologies
like screen readers, use the `value` part in `translations`.

**Example: value-text**

#### React

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

export const ValueText = () => (
  <Progress.Root
    className={styles.Root}
    translations={{
      value({ value, max }) {
        if (value === null) return 'Loading...'
        return `${value} of ${max} items loaded`
      },
    }}
  >
    <Progress.Label className={styles.Label}>Label</Progress.Label>
    <Progress.ValueText className={styles.ValueText} />
    <Progress.Track className={styles.Track}>
      <Progress.Range className={styles.Range} />
    </Progress.Track>
  </Progress.Root>
)

```

#### Solid

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

export const ValueText = () => (
  <Progress.Root
    class={styles.Root}
    translations={{
      value({ value, max }) {
        if (value === null) return 'Loading...'
        return `${value} of ${max} items loaded`
      },
    }}
  >
    <Progress.Label class={styles.Label}>Label</Progress.Label>
    <Progress.ValueText class={styles.ValueText} />
    <Progress.Track class={styles.Track}>
      <Progress.Range class={styles.Range} />
    </Progress.Track>
  </Progress.Root>
)

```

#### Vue

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

<template>
  <Progress.Root
    :class="styles.Root"
    :defaultValue="42"
    :translations="{
      value: ({ value, max }) => (value == null ? 'Loading...' : `${value} of ${max} items loaded`),
    }"
  >
    <Progress.Label :class="styles.Label">Label</Progress.Label>
    <Progress.ValueText :class="styles.ValueText" />
    <Progress.Track :class="styles.Track">
      <Progress.Range :class="styles.Range" />
    </Progress.Track>
  </Progress.Root>
</template>

```

#### Svelte

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

<Progress.Root
  class={styles.Root}
  defaultValue={42}
  translations={{
    value: ({ value, max }) => (value == null ? 'Loading...' : `${value} of ${max} items loaded`),
  }}
>
  <Progress.Label class={styles.Label}>Label</Progress.Label>
  <Progress.ValueText class={styles.ValueText} />
  <Progress.Track class={styles.Track}>
    <Progress.Range class={styles.Range} />
  </Progress.Track>
</Progress.Root>

```

### Orientation

By default, the progress is assumed to be horizontal. To change the orientation to vertical, set the orientation
property in the machine's context to vertical.

> Don't forget to change the styles of the vertical progress by specifying its height

**Example: vertical**

#### React

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

export const Vertical = () => (
  <Progress.Root className={styles.Root} orientation="vertical">
    <Progress.Label className={styles.Label}>Label</Progress.Label>
    <Progress.ValueText className={styles.ValueText} />
    <Progress.Track className={styles.Track}>
      <Progress.Range className={styles.Range} />
    </Progress.Track>
  </Progress.Root>
)

```

#### Solid

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

export const Vertical = () => (
  <Progress.Root class={styles.Root} orientation="vertical">
    <Progress.Label class={styles.Label}>Label</Progress.Label>
    <Progress.ValueText class={styles.ValueText} />
    <Progress.Track class={styles.Track}>
      <Progress.Range class={styles.Range} />
    </Progress.Track>
  </Progress.Root>
)

```

#### Vue

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

<template>
  <Progress.Root :class="styles.Root" :defaultValue="42" orientation="vertical">
    <Progress.Label :class="styles.Label">Label</Progress.Label>
    <Progress.ValueText :class="styles.ValueText" />
    <Progress.Track :class="styles.Track">
      <Progress.Range :class="styles.Range" />
    </Progress.Track>
  </Progress.Root>
</template>

```

#### Svelte

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

<Progress.Root class={styles.Root} defaultValue={42} orientation="vertical">
  <Progress.Label class={styles.Label}>Label</Progress.Label>
  <Progress.ValueText class={styles.ValueText} />
  <Progress.Track class={styles.Track}>
    <Progress.Range class={styles.Range} />
  </Progress.Track>
</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.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}>
        <Progress.Label className={styles.Label}>Label</Progress.Label>
        <Progress.ValueText className={styles.ValueText} />
        <Progress.Track className={styles.Track}>
          <Progress.Range className={styles.Range} />
        </Progress.Track>
      </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.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}>
        <Progress.Label class={styles.Label}>Label</Progress.Label>
        <Progress.ValueText class={styles.ValueText} />
        <Progress.Track class={styles.Track}>
          <Progress.Range class={styles.Range} />
        </Progress.Track>
      </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.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">
      <Progress.Label :class="styles.Label">Label</Progress.Label>
      <Progress.ValueText :class="styles.ValueText" />
      <Progress.Track :class="styles.Track">
        <Progress.Range :class="styles.Range" />
      </Progress.Track>
    </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.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}>
    <Progress.Label class={styles.Label}>Label</Progress.Label>
    <Progress.ValueText class={styles.ValueText} />
    <Progress.Track class={styles.Track}>
      <Progress.Range class={styles.Range} />
    </Progress.Track>
  </Progress.RootProvider>
</div>

```

## 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).