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="neutral" />
</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-[var(--ui-bg-accented)]',
indicator: 'rounded-full size-full transition-transform duration-200 ease-out',
status: 'flex justify-end text-[var(--ui-text-dimmed)] 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-[var(--ui-primary)]',
steps: 'text-[var(--ui-primary)]'
},
secondary: {
indicator: 'bg-[var(--ui-secondary)]',
steps: 'text-[var(--ui-secondary)]'
},
success: {
indicator: 'bg-[var(--ui-success)]',
steps: 'text-[var(--ui-success)]'
},
info: {
indicator: 'bg-[var(--ui-info)]',
steps: 'text-[var(--ui-info)]'
},
warning: {
indicator: 'bg-[var(--ui-warning)]',
steps: 'text-[var(--ui-warning)]'
},
error: {
indicator: 'bg-[var(--ui-error)]',
steps: 'text-[var(--ui-error)]'
},
neutral: {
indicator: 'bg-[var(--ui-bg-inverted)]',
steps: 'text-[var(--ui-bg)]'
}
},
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-[var(--ui-text-muted)]'
},
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] data-[state=indeterminate]:rtl:animate-[carousel-rtl_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] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_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'
}
}
}
})