Progress | Ark UI

Preview Component

Please note, the API of this component is currently in a preview phase and is subject to change.

No preview available for progress

Anatomy

To set up the progress correctly, you’ll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the Progress component in your project. Let’s take a look at the most basic example:

import { Progress } from '@ark-ui/react'

const Basic = () => (
  <Progress.Root>
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Indicator state="loading" />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
)

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

const Basic = () => (
  <Progress.Root>
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Indicator state="loading" />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
)

<script setup lang="ts">
import { Progress } from '@ark-ui/vue'
</script>

<template>
  <Progress.Root>
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Indicator state="loading" />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
</template>

Setting the initial value

To set the progress’s initial value, set the defaultValue prop to a number.

import { Progress } from '@ark-ui/react'

const InitialValue = () => (
  <Progress.Root defaultValue={70}>
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
)

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

const InitialValue = () => (
  <Progress.Root value={70}>
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
)

<script setup lang="ts">
import { Progress } from '@ark-ui/vue'
</script>

<template>
  <Progress.Root :model-value="70">
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
</template>

Specifying the maximum

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.

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

import { Progress } from '@ark-ui/react'

const Max = () => (
  <Progress.Root defaultValue={20} max={30}>
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
)

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

const Max = () => (
  <Progress.Root value={20} max={30}>
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
)

<script setup lang="ts">
import { Progress } from '@ark-ui/vue'
</script>

<template>
  <Progress.Root :model-value="20" :max="30">
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
</template>

Changing the 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

import { Progress } from '@ark-ui/react'

const Vertical = () => (
  <Progress.Root orientation="vertical">
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
)

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

const Vertical = () => (
  <Progress.Root orientation="vertical">
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
)

<script setup lang="ts">
import { Progress } from '@ark-ui/vue'
</script>

<template>
  <Progress.Root orientation="vertical">
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
</template>

Using as a circular progress

You can use the Progress component as a circular progress by replacing Progress.Track and Progress.Range with Progress.CircleTrack and Progress.CircleRange.

Remember to add Progress.Circle as a container for range and track.

Story not available

Story not available

Story not available

API Reference

Root

Prop	Type	Default
`asChild`	`boolean`
`defaultValue`	`number`
`dir`	`'ltr' \| 'rtl'`	`"ltr"`
`getRootNode`	`() => Node \| ShadowRoot \| Document`
`id`	`string`
`max`	`number`
`min`	`number`
`orientation`	`Orientation`	`"horizontal"`
`translations`	`IntlTranslations`
`value`	`number`

Label

Prop	Type	Default
`asChild`	`boolean`

Range

Prop	Type	Default
`asChild`	`boolean`

Track

Prop	Type	Default
`asChild`	`boolean`

Circle

Prop	Type	Default
`asChild`	`boolean`

Indicator

Prop	Type	Default
`state`	`ProgressState`
`asChild`	`boolean`

ValueText

Prop	Type	Default
`asChild`	`boolean`

CircleRange

Prop	Type	Default
`asChild`	`boolean`

CircleTrack

Prop	Type	Default
`asChild`	`boolean`