Progress
<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 add 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 | 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 |
Emit | Payload |
---|---|
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 |
Methods | Type |
---|---|
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 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 | 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 Attribute | Value |
---|---|
[data-state] | "complete" | "indeterminate" | "loading" |
[data-value] | The current value |
[data-max] | The max value |