Skip to content

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
vue
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ProgressIndicator, ProgressRoot } from 'radix-vue'

const progressValue = ref(10)

onMounted(() => {
  const timer = setTimeout(() => (progressValue.value = 66), 500)
  return () => clearTimeout(timer)
})
</script>

<template>
  <ProgressRoot
    v-model="progressValue"
    class="relative overflow-hidden bg-blackA9 rounded-full w-full sm:w-[300px] h-4 sm:h-5"
    style="transform: translateZ(0)"
  >
    <ProgressIndicator
      class="bg-white rounded-full w-full h-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
      :style="`transform: translateX(-${100 - progressValue}%)`"
    />
  </ProgressRoot>
</template>

Features

  • Provides context for assistive technology to read the progress of a task.

Installation

Install the component from your command line.

sh
$ npm add radix-vue

Anatomy

Import all parts and piece them together.

vue
<script setup>
import { ProgressIndicator, ProgressRoot } from 'radix-vue'
</script>

<template>
  <ProgressRoot>
    <ProgressIndicator />
  </ProgressRoot>
</template>

Accessibility

Adheres to the progressbar role requirements.

API Reference

Root

Contains all of the progress parts.

PropDefaultType
as
'div'
AsTag | Component

The element or component this component should render as. Can be overwrite by asChild

asChild
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read our Composition guide for more details.

getValueLabel
`${Math.round((value / max) * DEFAULT_MAX)}%`
((value: number, max: number) => string)

A function to get the accessible label text representing the current value in a human-readable format.

If not provided, the value label will be read as the numeric value as a percentage of the max value.

max
DEFAULT_MAX
number

The maximum progress value.

modelValue
number | null

The progress value. Can be bind as v-model.

EmitPayload
update:max
[value: number]

Event handler called when the max value changes

update:modelValue
[value: string[]]

Event handler called when the progress value changes

Slots (default)Payload
modelValue
number | null | undefined

Current input values

MethodsType
getValueLabel
(value: number, max: number) => string

A function to get the accessible label text representing the current value in a human-readable format.

If not provided, the value label will be read as the numeric value as a percentage of the max value.

Data AttributeValue
[data-state]"complete" | "indeterminate" | "loading"
[data-value]The current value
[data-max]The max value

Indicator

Used to show the progress visually. It also makes progress accessible to assistive technologies.

PropDefaultType
as
'div'
AsTag | Component

The element or component this component should render as. Can be overwrite by asChild

asChild
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read our Composition guide for more details.

Data AttributeValue
[data-state]"complete" | "indeterminate" | "loading"
[data-value]The current value
[data-max]The max value