Vinicunca

Progress

ProgressGitHub
An indicator showing the progress of a task.

Usage

Use the v-model directive to control the value of the Progress.

<script setup lang="ts">
const value = ref(50)
</script>

<template>
  <PProgress v-model="value" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(50)
</script>

<template>
  <PProgress v-model="value" />
</template>
Use the ProgressGroup component to split a single bar into multiple segments that add up to a total.

Max

Use the max prop to set the maximum value of the Progress.

<script setup lang="ts">
const value = ref(3)
</script>

<template>
  <PProgress v-model="value" :max="4" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(3)
</script>

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

Waiting...
Cloning...
Migrating...
Deploying...
Done!
<script setup lang="ts">
const value = ref(3)
</script>

<template>
  <PProgress
    v-model="value"
    :max="['Waiting...', 'Cloning...', 'Migrating...', 'Deploying...', 'Done!']"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(3)
</script>

<template>
  <PProgress
    v-model="value"
    :max="['Waiting...', 'Cloning...', 'Migrating...', 'Deploying...', 'Done!']"
  />
</template>

Status

Use the status prop to display the current Progress value above the bar.

50% 
<script setup lang="ts">
const value = ref(50)
</script>

<template>
  <PProgress v-model="value" status />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(50)
</script>

<template>
  <PProgress v-model="value" status />
</template>
The status tracks the end of the bar, use :ui="{ status: 'w-full' }" to make it span the full width instead.

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>
  <PProgress v-model="value" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(null)
</script>

<template>
  <PProgress 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>
  <PProgress animation="swing" />
</template>
The animation is automatically disabled when the user prefers reduced motion, the indeterminate bar is displayed as a full width pulse instead.

Orientation

Use the orientation prop to change the orientation of the Progress. Defaults to horizontal.

<template>
  <PProgress orientation="vertical" class="h-48" />
</template>

Color

Use the color prop to change the color of the Progress.

<template>
  <PProgress color="neutral" />
</template>
This prop also accepts any CSS color value for palettes outside the theme.

Size

Use the size prop to change the size of the Progress.

<template>
  <PProgress size="xl" />
</template>

Inverted

Use the inverted prop to visually invert the Progress.

<template>
  <PProgress inverted v-model="value" />
</template>

API

Props

Prop Default Type
as
'div'
any

The element or component this component should render as.

max
number | any[]

The maximum progress value.

status
boolean

Display the current progress value.

inverted
boolean

Whether the progress is visually inverted.

size
'md'
"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
color
'primary'
"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral" | string

Any theme color, or any CSS color value for palettes outside the theme.

orientation
'horizontal'
"horizontal" | "vertical"

The orientation of the progress bar.

animation
'carousel'
"carousel" | "carousel-inverse" | "swing" | "elastic"

The animation of the progress bar.

getValueLabel
(value: number | null , max: number): string | undefined

A function to get the accessible label text 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.

getValueText
(value: number | null , max: number): string | undefined

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

modelValue
null | number

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

ui
{ root?: SlotClass; base?: SlotClass; indicator?: SlotClass; status?: SlotClass; steps?: SlotClass; step?: SlotClass; }

Slots

Slot Type
status
{ percent?: number | undefined; }

Emits

Event Type
update:modelValue
[value: string[] | undefined]
update:max
[value: number]

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    progress: {
      slots: {
        root: 'gap-2',
        base: 'relative overflow-hidden rounded-full bg-background-accented',
        indicator: 'rounded-full size-full transition-transform-280 ease-out motion-reduce:transition-none motion-reduce:data-[state=indeterminate]:animate-pulse',
        status: 'flex color-text-dimmed duration-280 ease-out motion-reduce:transition-none',
        steps: 'grid items-end',
        step: 'truncate text-end row-start-1 col-start-1 transition-opacity ease-out'
      },
      variants: {
        animation: {
          carousel: '',
          'carousel-inverse': '',
          swing: '',
          elastic: ''
        },
        color: {
          primary: {
            indicator: 'bg-primary',
            steps: 'color-primary'
          },
          secondary: {
            indicator: 'bg-secondary',
            steps: 'color-secondary'
          },
          success: {
            indicator: 'bg-success',
            steps: 'color-success'
          },
          info: {
            indicator: 'bg-info',
            steps: 'color-info'
          },
          warning: {
            indicator: 'bg-warning',
            steps: 'color-warning'
          },
          error: {
            indicator: 'bg-error',
            steps: 'color-error'
          },
          neutral: {
            indicator: 'bg-background-inverted',
            steps: 'color-text-highlighted'
          }
        },
        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 color-text-muted'
          },
          other: {
            step: 'opacity-0'
          },
          last: {
            step: ''
          }
        },
        orientation: {
          horizontal: {
            root: 'w-full flex flex-col',
            base: 'w-full',
            status: 'flex-row min-w-fit w-$percent transition-[width] items-center justify-end'
          },
          vertical: {
            root: 'h-full flex flex-row-reverse',
            base: 'h-full',
            status: 'flex-col h-$percent min-h-fit transition-[height] justify-end'
          }
        },
        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: 'motion-safe:data-[state=indeterminate]:animate-carousel motion-safe:data-[state=indeterminate]:rtl:animate-carousel-rtl'
          }
        },
        {
          orientation: 'vertical',
          animation: 'carousel',
          class: {
            indicator: 'motion-safe:data-[state=indeterminate]:animate-carousel-vertical'
          }
        },
        {
          orientation: 'horizontal',
          animation: 'carousel-inverse',
          class: {
            indicator: 'motion-safe:data-[state=indeterminate]:animate-carousel-inverse motion-safe:data-[state=indeterminate]:rtl:animate-carousel-inverse-rtl'
          }
        },
        {
          orientation: 'vertical',
          animation: 'carousel-inverse',
          class: {
            indicator: 'motion-safe:data-[state=indeterminate]:animate-carousel-inverse-vertical'
          }
        },
        {
          orientation: 'horizontal',
          animation: 'swing',
          class: {
            indicator: 'motion-safe:data-[state=indeterminate]:animate-swing'
          }
        },
        {
          orientation: 'vertical',
          animation: 'swing',
          class: {
            indicator: 'motion-safe:data-[state=indeterminate]:animate-swing-vertical'
          }
        },
        {
          orientation: 'horizontal',
          animation: 'elastic',
          class: {
            indicator: 'relative motion-safe:data-[state=indeterminate]:animate-elastic'
          }
        },
        {
          orientation: 'vertical',
          animation: 'elastic',
          class: {
            indicator: 'relative motion-safe:data-[state=indeterminate]:animate-elastic-vertical'
          }
        }
      ],
      defaultVariants: {
        animation: 'carousel',
        color: 'primary',
        size: 'md'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        progress: {
          slots: {
            root: 'gap-2',
            base: 'relative overflow-hidden rounded-full bg-background-accented',
            indicator: 'rounded-full size-full transition-transform-280 ease-out motion-reduce:transition-none motion-reduce:data-[state=indeterminate]:animate-pulse',
            status: 'flex color-text-dimmed duration-280 ease-out motion-reduce:transition-none',
            steps: 'grid items-end',
            step: 'truncate text-end row-start-1 col-start-1 transition-opacity ease-out'
          },
          variants: {
            animation: {
              carousel: '',
              'carousel-inverse': '',
              swing: '',
              elastic: ''
            },
            color: {
              primary: {
                indicator: 'bg-primary',
                steps: 'color-primary'
              },
              secondary: {
                indicator: 'bg-secondary',
                steps: 'color-secondary'
              },
              success: {
                indicator: 'bg-success',
                steps: 'color-success'
              },
              info: {
                indicator: 'bg-info',
                steps: 'color-info'
              },
              warning: {
                indicator: 'bg-warning',
                steps: 'color-warning'
              },
              error: {
                indicator: 'bg-error',
                steps: 'color-error'
              },
              neutral: {
                indicator: 'bg-background-inverted',
                steps: 'color-text-highlighted'
              }
            },
            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 color-text-muted'
              },
              other: {
                step: 'opacity-0'
              },
              last: {
                step: ''
              }
            },
            orientation: {
              horizontal: {
                root: 'w-full flex flex-col',
                base: 'w-full',
                status: 'flex-row min-w-fit w-$percent transition-[width] items-center justify-end'
              },
              vertical: {
                root: 'h-full flex flex-row-reverse',
                base: 'h-full',
                status: 'flex-col h-$percent min-h-fit transition-[height] justify-end'
              }
            },
            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: 'motion-safe:data-[state=indeterminate]:animate-carousel motion-safe:data-[state=indeterminate]:rtl:animate-carousel-rtl'
              }
            },
            {
              orientation: 'vertical',
              animation: 'carousel',
              class: {
                indicator: 'motion-safe:data-[state=indeterminate]:animate-carousel-vertical'
              }
            },
            {
              orientation: 'horizontal',
              animation: 'carousel-inverse',
              class: {
                indicator: 'motion-safe:data-[state=indeterminate]:animate-carousel-inverse motion-safe:data-[state=indeterminate]:rtl:animate-carousel-inverse-rtl'
              }
            },
            {
              orientation: 'vertical',
              animation: 'carousel-inverse',
              class: {
                indicator: 'motion-safe:data-[state=indeterminate]:animate-carousel-inverse-vertical'
              }
            },
            {
              orientation: 'horizontal',
              animation: 'swing',
              class: {
                indicator: 'motion-safe:data-[state=indeterminate]:animate-swing'
              }
            },
            {
              orientation: 'vertical',
              animation: 'swing',
              class: {
                indicator: 'motion-safe:data-[state=indeterminate]:animate-swing-vertical'
              }
            },
            {
              orientation: 'horizontal',
              animation: 'elastic',
              class: {
                indicator: 'relative motion-safe:data-[state=indeterminate]:animate-elastic'
              }
            },
            {
              orientation: 'vertical',
              animation: 'elastic',
              class: {
                indicator: 'relative motion-safe:data-[state=indeterminate]:animate-elastic-vertical'
              }
            }
          ],
          defaultVariants: {
            animation: 'carousel',
            color: 'primary',
            size: 'md'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

Kbd

A kbd element to display a keyboard key.

ProgressGroup

A progress bar split into multiple segments that add up to a total.