Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

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

npm install radix-vue

Anatomy

Import all parts and piece them together.

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

Prop	Default	Type
as	'div'	AsTag | Component The element or component this component should render as. Can be overwrite by asChild
asChild		boolean Setting asChild to true has the same effect as setting as to template.
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.

Emit	Payload
update:max	[value: number] Event handler called when the max value changes
update:modelValue	[value: string[]] Event handler called when the progres value changes

Data Attribute	Value
[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.

Prop	Default	Type
as	'div'	AsTag | Component The element or component this component should render as. Can be overwrite by asChild
asChild		boolean Setting asChild to true has the same effect as setting as to template.

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