Progress
An element that shows either determinate or indeterminate progress.
An element that shows either determinate or indeterminate progress.
Please note, the API of this component is currently in a preview phase and is subject to change.
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.
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>
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>
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>
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>
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
Prop | Type | Default |
---|---|---|
asChild Render as a different element type. | boolean | |
defaultValue The initial value of the progress. | number | |
dir The document's text/writing direction. | 'ltr' | 'rtl' | "ltr" |
getRootNode A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. | () => Node | ShadowRoot | Document | |
id The unique identifier of the machine. | string | |
max The maximum allowed value of the progress bar. | number | |
min The minimum allowed value of the progress bar. | number | |
orientation The orientation of the element. | Orientation | "horizontal" |
translations The localized messages to use. | IntlTranslations | |
value The current value of the progress bar. | number |
Prop | Type | Default |
---|---|---|
asChild Render as a different element type. | boolean |
Prop | Type | Default |
---|---|---|
asChild Render as a different element type. | boolean |
Prop | Type | Default |
---|---|---|
asChild Render as a different element type. | boolean |
Prop | Type | Default |
---|---|---|
asChild Render as a different element type. | boolean |
Prop | Type | Default |
---|---|---|
state | ProgressState | |
asChild Render as a different element type. | boolean |
Prop | Type | Default |
---|---|---|
asChild Render as a different element type. | boolean |
Prop | Type | Default |
---|---|---|
asChild Render as a different element type. | boolean |
Prop | Type | Default |
---|---|---|
asChild Render as a different element type. | boolean |
Previous
PresenceNext
Radio Group