Progress

A component that displays the progress status for a task.

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

<template>
  <Progress.Root>
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.View state="loading" />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
    <Progress.Circle>
      <Progress.CircleTrack />
      <Progress.CircleRange />
    </Progress.Circle>
  </Progress.Root>
</template>

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

export function Basic() {
  return (
    <Progress.Root defaultValue={42}>
      <Progress.Label>Label</Progress.Label>
      <Progress.ValueText />
      <Progress.Track>
        <Progress.Range />
      </Progress.Track>
      <Progress.Circle>
        <Progress.CircleTrack />
        <Progress.CircleRange />
      </Progress.Circle>
    </Progress.Root>
  )
}

import { Progress } from '@destyler-ui/solid/progress'

export function Basic() {
  return (
    <Progress.Root defaultValue={42}>
      <Progress.Label>Label</Progress.Label>
      <Progress.ValueText />
      <Progress.Track>
        <Progress.Range />
      </Progress.Track>
    </Progress.Root>
  )
}

<script lang="ts">
  import { Progress } from '@destyler-ui/svelte'
</script>

<Progress.Root defaultValue={42}>
  <Progress.Label>Label</Progress.Label>
  <Progress.ValueText />
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
  <Progress.Circle>
    <Progress.CircleTrack />
    <Progress.CircleRange />
  </Progress.Circle>
</Progress.Root>

Anatomy

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

<template>
  <Progress.Root>
    <Progress.Label />
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
    <Progress.View />
  </Progress.Root>
</template>

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

export default function Basic() {
  return (
    <Progress.Root>
      <Progress.Label />
      <Progress.ValueText />
      <Progress.Track>
        <Progress.Range />
      </Progress.Track>
      <Progress.View />
    </Progress.Root>
  )
}

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

export default function Basic() {
  return (
    <Progress.Root>
      <Progress.Label />
      <Progress.ValueText />
      <Progress.Track>
        <Progress.Range />
      </Progress.Track>
      <Progress.View state="loading" />
    </Progress.Root>
  )
}

<script lang="ts">
  import { Progress } from '@destyler-ui/svelte'
</script>

<Progress.Root defaultValue={42}>
  <Progress.Label>Label</Progress.Label>
  <Progress.ValueText />
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
  <Progress.Circle>
    <Progress.CircleTrack />
    <Progress.CircleRange />
  </Progress.Circle>
</Progress.Root>

Examples

Basic

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

<template>
  <Progress.Root>
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.View state="loading" />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
    <Progress.Circle>
      <Progress.CircleTrack />
      <Progress.CircleRange />
    </Progress.Circle>
  </Progress.Root>
</template>

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

export function Basic() {
  return (
    <Progress.Root defaultValue={42}>
      <Progress.Label>Label</Progress.Label>
      <Progress.ValueText />
      <Progress.Track>
        <Progress.Range />
      </Progress.Track>
      <Progress.Circle>
        <Progress.CircleTrack />
        <Progress.CircleRange />
      </Progress.Circle>
    </Progress.Root>
  )
}

import { Progress } from '@destyler-ui/solid/progress'

export function Basic() {
  return (
    <Progress.Root defaultValue={42}>
      <Progress.Label>Label</Progress.Label>
      <Progress.ValueText />
      <Progress.Track>
        <Progress.Range />
      </Progress.Track>
    </Progress.Root>
  )
}

<script lang="ts">
  import { Progress } from '@destyler-ui/svelte'
</script>

<Progress.Root defaultValue={42}>
  <Progress.Label>Label</Progress.Label>
  <Progress.ValueText />
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
  <Progress.Circle>
    <Progress.CircleTrack />
    <Progress.CircleRange />
  </Progress.Circle>
</Progress.Root>

Initial Value

Seed an initial displayed value with defaultValue. Prefer seeding over treating progress as a fully controlled form control.

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

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

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

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

import { Progress } from '@destyler-ui/solid/progress'

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

<script lang="ts">
  import { Progress } from '@destyler-ui/svelte'
</script>

<Progress.Root defaultValue={70}>
  <Progress.Label>Label</Progress.Label>
  <Progress.ValueText />
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
</Progress.Root>

Controlled

Control the displayed value with live state (linear and circular Controlled examples).

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

const value = ref(42)
</script>

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

import { useState } from 'react'
import { Progress } from '@destyler-ui/react'

export function Controlled() {
  const [value, setValue] = useState<number | null>(42)

  return (
    <Progress.Root value={value} onValueChange={({ value }) => setValue(value)}>
      <Progress.Label>Label</Progress.Label>
      <Progress.ValueText />
      <Progress.Track>
        <Progress.Range />
      </Progress.Track>
    </Progress.Root>
  )
}

import { Progress } from '@destyler-ui/solid/progress'
import { createSignal } from 'solid-js'

export function Controlled() {
  const [value, setValue] = createSignal<number | null>(42)

  return (
    <Progress.Root value={value()} onValueChange={e => setValue(e.value)}>
      <Progress.Label>Label</Progress.Label>
      <Progress.ValueText />
      <Progress.Track>
        <Progress.Range />
      </Progress.Track>
    </Progress.Root>
  )
}

<script lang="ts">
  import { Progress } from '@destyler-ui/svelte'

  let value = $state<number | null>(42)
</script>

<Progress.Root bind:value>
  <Progress.Label>Label</Progress.Label>
  <Progress.ValueText />
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
</Progress.Root>

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

const value = ref(42)
</script>

<template>
  <Progress.Root v-model="value">
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Circle>
      <Progress.CircleTrack />
      <Progress.CircleRange />
    </Progress.Circle>
  </Progress.Root>
</template>

import { useState } from 'react'
import { Progress } from '@destyler-ui/react'

export function Controlled() {
  const [value, setValue] = useState<number | null>(42)

  return (
    <Progress.Root value={value} onValueChange={({ value }) => setValue(value)}>
      <Progress.Label>Label</Progress.Label>
      <Progress.ValueText />
      <Progress.Circle>
        <Progress.CircleTrack />
        <Progress.CircleRange />
      </Progress.Circle>
    </Progress.Root>
  )
}

import { Progress } from '@destyler-ui/solid/progress'
import { createSignal } from 'solid-js'

export function Controlled() {
  const [value, setValue] = createSignal<number | null>(42)

  return (
    <Progress.Root value={value()} onValueChange={e => setValue(e.value)}>
      <Progress.Label>Label</Progress.Label>
      <Progress.ValueText />
      <Progress.Circle>
        <Progress.CircleTrack />
        <Progress.CircleRange />
      </Progress.Circle>
    </Progress.Root>
  )
}

<script lang="ts">
  import { Progress } from '@destyler-ui/svelte'

  let value = $state<number | null>(42)
</script>

<Progress.Root bind:value>
  <Progress.Label>Label</Progress.Label>
  <Progress.ValueText />
  <Progress.Circle>
    <Progress.CircleTrack />
    <Progress.CircleRange />
  </Progress.Circle>
</Progress.Root>

Linear

Display a linear progress bar.

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

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

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

export function Linear() {
  return (
    <Progress.Root defaultValue={42}>
      <Progress.Label>Label</Progress.Label>
      <Progress.ValueText />
      <Progress.Track>
        <Progress.Range />
      </Progress.Track>
    </Progress.Root>
  )
}

export { Linear as linear }

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

export function Linear() {
  return (
    <Progress.Root defaultValue={42}>
      <Progress.Label>Label</Progress.Label>
      <Progress.ValueText />
      <Progress.Track>
        <Progress.Range />
      </Progress.Track>
    </Progress.Root>
  )
}

export { Linear as linear }

<script lang="ts">
  import { Progress } from '@destyler-ui/svelte'
</script>

<Progress.Root defaultValue={42}>
  <Progress.Label>Label</Progress.Label>
  <Progress.ValueText />
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
</Progress.Root>

Circular

Display a circular progress indicator.

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

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

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

export function Circular() {
  return (
    <Progress.Root defaultValue={42}>
      <Progress.Label>Label</Progress.Label>
      <Progress.ValueText />
      <Progress.Circle>
        <Progress.CircleTrack />
        <Progress.CircleRange />
      </Progress.Circle>
    </Progress.Root>
  )
}

export { Circular as circular }

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

export function Circular() {
  return (
    <Progress.Root defaultValue={42}>
      <Progress.Label>Label</Progress.Label>
      <Progress.ValueText />
      <Progress.Circle>
        <Progress.CircleTrack />
        <Progress.CircleRange />
      </Progress.Circle>
    </Progress.Root>
  )
}

export { Circular as circular }

<script lang="ts">
  import { Progress } from '@destyler-ui/svelte'
</script>

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

API Reference

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultValue`	—	`null \| number` The initial value of the progress when it is first rendered. Use when you do not need to control the state of the progress.
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; track: string; label: string; circle: string; }>` The ids of the elements in the progress bar. Useful for composition.
`max`	`100`	`number` The maximum allowed value of the progress bar.
`min`	`0`	`number` The minimum allowed value of the progress bar.
`modelValue`	—	`null \| number` Use this prop to control the value of the progress.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the element.
`translations`	—	`progress.IntlTranslations` The localized messages to use.

Emit	Event
`update:modelValue`	`[value: number \| null]` The callback fired when the model value changes.
`valueChange`	`[details: ValueChangeDetails]` Callback fired when the value changes.

Circle

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

CircleRange

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

CircleTrack

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Range

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Track

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ValueText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

View

Prop	Default	Type
`state*`	—	`ProgressState`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultValue`	—	`null \| number` The initial value of the progress when it is first rendered. Use when you do not need to control the state of the progress.
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; track: string; label: string; circle: string; }>` The ids of the elements in the progress bar. Useful for composition.
`max`	`100`	`number` The maximum allowed value of the progress bar.
`min`	`0`	`number` The minimum allowed value of the progress bar.
`onValueChange`	—	`(details: progress.ValueChangeDetails) => void` Callback fired when the value changes.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the element.
`translations`	—	`progress.IntlTranslations` The localized messages to use.
`value`	`50`	`null \| number` The current value of the progress bar.

Circle

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

CircleRange

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

CircleTrack

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseProgressContext) => ReactNode`

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Range

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseProgressReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Track

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ValueText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

View

Prop	Default	Type
`state*`	—	`ProgressState`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultValue`	—	`null \| number` The initial value of the progress when it is first rendered. Use when you do not need to control the state of the progress.
`ids`	—	`Partial<{ root: string; track: string; label: string; circle: string; }>` The ids of the elements in the progress bar. Useful for composition.
`max`	`100`	`number` The maximum allowed value of the progress bar.
`min`	`0`	`number` The minimum allowed value of the progress bar.
`onValueChange`	—	`(details: ValueChangeDetails) => void` Callback fired when the value changes.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the element.
`translations`	—	`progress.IntlTranslations` The localized messages to use.
`value`	`50`	`null \| number` The current value of the progress bar.

Circle

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.SvgSVGAttributes<SVGSVGElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

CircleRange

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.CircleSVGAttributes<SVGCircleElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

CircleTrack

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.CircleSVGAttributes<SVGCircleElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseProgressContext) => Element`

Label

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.LabelHTMLAttributes<HTMLLabelElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Range

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseProgressReturn`
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Track

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ValueText

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

View

Prop	Default	Type
`state*`	—	`ProgressState`
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`defaultValue`	—	`null \| number`
`id`	—	`string`
`ids`	—	`Partial<{ root: string; track: string; label: string; circle: string; }>` The ids of the elements in the progress bar. Useful for composition.
`max`	`100`	`number` The maximum allowed value of the progress bar.
`min`	`0`	`number` The minimum allowed value of the progress bar.
`onValueChange`	—	`(details: import("@destyler/progress").ValueChangeDetails) => void` Callback fired when the value changes.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the element.
`translations`	—	`import("@destyler/progress").IntlTranslations` The localized messages to use.
`value`	`50`	`null \| number` The current value of the progress bar.

Circle

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"svg">]>`
`children`	—	`Snippet<[]> \| undefined`

CircleRange

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"circle">]>`
`children`	—	`Snippet<[]> \| undefined`

CircleTrack

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"circle">]>`
`children`	—	`Snippet<[]> \| undefined`

Context

Prop	Default	Type
`api`	—	`Snippet<[UseProgressContext]>`

Label

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"label">]>`
`children`	—	`Snippet<[]> \| undefined`

Range

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UseProgressReturn`

Track

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

ValueText

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`

View

Prop	Default	Type
`state*`	—	`ProgressState`
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`