Usage
Use the v-model directive to control the value of the Progress.
<script setup lang="ts">
const value = ref(50)
</script>
<template>
<UProgress v-model="value" />
</template>
Max
Use the max prop to set the maximum value of the Progress.
<script setup lang="ts">
const value = ref(3)
</script>
<template>
<UProgress v-model="value" :max="4" />
</template>
Use the max prop with an array of strings to display the active step under the bar, the maximum value of the Progress is the length of the array.
<script setup lang="ts">
const value = ref(3)
</script>
<template>
<UProgress
v-model="value"
:max="['Waiting...', 'Cloning...', 'Migrating...', 'Deploying...', 'Done!']"
/>
</template>
Status
Use the status prop to display the current Progress value above the bar.
<script setup lang="ts">
const value = ref(50)
</script>
<template>
<UProgress v-model="value" status />
</template>
Indeterminate
When no v-model is set or the value is null, the Progress becomes indeterminate. The progress bar is animated as a carousel, but you can change it using the animation prop.
<script setup lang="ts">
const value = ref(null)
</script>
<template>
<UProgress v-model="value" />
</template>
Animation
Use the animation prop to change the animation of the Progress to an inverse carousel, a swinging bar or an elastic bar. Defaults to carousel.
<template>
<UProgress animation="swing" />
</template>
Orientation
Use the orientation prop to change the orientation of the Progress. Defaults to horizontal.
<template>
<UProgress orientation="vertical" class="h-48" />
</template>
Color
Use the color prop to change the color of the Slider.
<template>
<UProgress color="gray" />
</template>
Size
Use the size prop to change the size of the Slider.
<template>
<UProgress size="xl" />
</template>
Inverted
Use the inverted prop to visually invert the Progress.
<template>
<UProgress inverted v-model="value" />
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
max |
The maximum progress value. | |
status |
Display the current progress value. | |
inverted |
|
Whether the progress is visually inverted. |
size |
|
|
color |
|
|
orientation |
|
The orientation of the progress bar. |
animation |
|
|
modelValue |
|
The progress value. Can be bind as |
getValueLabel |
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. | |
ui |
|
Slots
| Slot | Type |
|---|---|
status |
|
Emits
| Event | Type |
|---|---|
update:modelValue |
|
update:max |
|
Theme
export default defineAppConfig({
ui: {
progress: {
slots: {
root: 'gap-2',
base: 'relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700',
indicator: 'rounded-full size-full transition-transform duration-200 ease-out',
status: 'flex justify-end text-gray-400 dark:text-gray-500 transition-[width] duration-200',
steps: 'grid items-end',
step: 'truncate text-end row-start-1 col-start-1 transition-opacity'
},
variants: {
animation: {
carousel: '',
'carousel-inverse': '',
swing: '',
elastic: ''
},
color: {
primary: {
indicator: 'bg-primary-500 dark:bg-primary-400',
steps: 'text-primary-500 dark:text-primary-400'
},
error: {
indicator: 'bg-error-500 dark:bg-error-400',
steps: 'text-error-500 dark:text-error-400'
},
red: {
indicator: 'bg-red-500 dark:bg-red-400',
steps: 'text-red-500 dark:text-red-400'
},
orange: {
indicator: 'bg-orange-500 dark:bg-orange-400',
steps: 'text-orange-500 dark:text-orange-400'
},
amber: {
indicator: 'bg-amber-500 dark:bg-amber-400',
steps: 'text-amber-500 dark:text-amber-400'
},
yellow: {
indicator: 'bg-yellow-500 dark:bg-yellow-400',
steps: 'text-yellow-500 dark:text-yellow-400'
},
lime: {
indicator: 'bg-lime-500 dark:bg-lime-400',
steps: 'text-lime-500 dark:text-lime-400'
},
green: {
indicator: 'bg-green-500 dark:bg-green-400',
steps: 'text-green-500 dark:text-green-400'
},
emerald: {
indicator: 'bg-emerald-500 dark:bg-emerald-400',
steps: 'text-emerald-500 dark:text-emerald-400'
},
teal: {
indicator: 'bg-teal-500 dark:bg-teal-400',
steps: 'text-teal-500 dark:text-teal-400'
},
cyan: {
indicator: 'bg-cyan-500 dark:bg-cyan-400',
steps: 'text-cyan-500 dark:text-cyan-400'
},
sky: {
indicator: 'bg-sky-500 dark:bg-sky-400',
steps: 'text-sky-500 dark:text-sky-400'
},
blue: {
indicator: 'bg-blue-500 dark:bg-blue-400',
steps: 'text-blue-500 dark:text-blue-400'
},
indigo: {
indicator: 'bg-indigo-500 dark:bg-indigo-400',
steps: 'text-indigo-500 dark:text-indigo-400'
},
violet: {
indicator: 'bg-violet-500 dark:bg-violet-400',
steps: 'text-violet-500 dark:text-violet-400'
},
purple: {
indicator: 'bg-purple-500 dark:bg-purple-400',
steps: 'text-purple-500 dark:text-purple-400'
},
fuchsia: {
indicator: 'bg-fuchsia-500 dark:bg-fuchsia-400',
steps: 'text-fuchsia-500 dark:text-fuchsia-400'
},
pink: {
indicator: 'bg-pink-500 dark:bg-pink-400',
steps: 'text-pink-500 dark:text-pink-400'
},
rose: {
indicator: 'bg-rose-500 dark:bg-rose-400',
steps: 'text-rose-500 dark:text-rose-400'
},
gray: {
indicator: 'bg-gray-900 dark:bg-white',
steps: 'text-white dark:text-gray-900'
}
},
size: {
'2xs': {
status: 'text-xs',
steps: 'text-xs'
},
xs: {
status: 'text-xs',
steps: 'text-xs'
},
sm: {
status: 'text-sm',
steps: 'text-sm'
},
md: {
status: 'text-sm',
steps: 'text-sm'
},
lg: {
status: 'text-sm',
steps: 'text-sm'
},
xl: {
status: 'text-base',
steps: 'text-base'
},
'2xl': {
status: 'text-base',
steps: 'text-base'
}
},
step: {
active: {
step: 'opacity-100'
},
first: {
step: 'opacity-100 text-gray-500 dark:text-gray-400'
},
other: {
step: 'opacity-0'
},
last: {
step: ''
}
},
orientation: {
horizontal: {
root: 'w-full flex flex-col',
base: 'w-full',
status: 'flex-row'
},
vertical: {
root: 'h-full flex flex-row-reverse',
base: 'h-full',
status: 'flex-col'
}
},
inverted: {
true: {
status: 'self-end'
}
}
},
compoundVariants: [
{
inverted: true,
orientation: 'horizontal',
class: {
step: 'text-start',
status: 'flex-row-reverse'
}
},
{
inverted: true,
orientation: 'vertical',
class: {
steps: 'items-start',
status: 'flex-col-reverse'
}
},
{
orientation: 'horizontal',
size: '2xs',
class: 'h-px'
},
{
orientation: 'horizontal',
size: 'xs',
class: 'h-0.5'
},
{
orientation: 'horizontal',
size: 'sm',
class: 'h-1'
},
{
orientation: 'horizontal',
size: 'md',
class: 'h-2'
},
{
orientation: 'horizontal',
size: 'lg',
class: 'h-3'
},
{
orientation: 'horizontal',
size: 'xl',
class: 'h-4'
},
{
orientation: 'horizontal',
size: '2xl',
class: 'h-5'
},
{
orientation: 'vertical',
size: '2xs',
class: 'w-px'
},
{
orientation: 'vertical',
size: 'xs',
class: 'w-0.5'
},
{
orientation: 'vertical',
size: 'sm',
class: 'w-1'
},
{
orientation: 'vertical',
size: 'md',
class: 'w-2'
},
{
orientation: 'vertical',
size: 'lg',
class: 'w-3'
},
{
orientation: 'vertical',
size: 'xl',
class: 'w-4'
},
{
orientation: 'vertical',
size: '2xl',
class: 'w-5'
},
{
orientation: 'horizontal',
animation: 'carousel',
class: {
indicator: 'data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]'
}
},
{
orientation: 'vertical',
animation: 'carousel',
class: {
indicator: 'data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]'
}
},
{
orientation: 'horizontal',
animation: 'carousel-inverse',
class: {
indicator: 'data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite]'
}
},
{
orientation: 'vertical',
animation: 'carousel-inverse',
class: {
indicator: 'data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]'
}
},
{
orientation: 'horizontal',
animation: 'swing',
class: {
indicator: 'data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]'
}
},
{
orientation: 'vertical',
animation: 'swing',
class: {
indicator: 'data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]'
}
},
{
orientation: 'horizontal',
animation: 'elastic',
class: {
indicator: 'data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]'
}
},
{
orientation: 'vertical',
animation: 'elastic',
class: {
indicator: 'data-[state=indeterminate]:animate-[elastic-vertical_2s_ease-in-out_infinite]'
}
}
],
defaultVariants: {
animation: 'carousel',
color: 'primary',
size: 'md'
}
}
}
})