Progress

Display progress with modern bar or circular indicators.

Basic

30%

65%

100%

<VxProgress :percentage="30" />
<VxProgress :percentage="65" />
<VxProgress :percentage="100" />

Variants

70%

70%

70%

70%

70%

<VxProgress :percentage="70" variant="success" />
<VxProgress :percentage="70" variant="warning" />
<VxProgress :percentage="70" variant="danger" />
<VxProgress :percentage="70" variant="info" />

Sizes

60%

60%

60%

60%

60%

<VxProgress :percentage="60" size="xs" />
<VxProgress :percentage="60" size="sm" />
<VxProgress :percentage="60" />
<VxProgress :percentage="60" size="lg" />
<VxProgress :percentage="60" size="xl" />

Text Inside

75%

30%

<VxProgress :percentage="75" size="xl" text-inside variant="success" />

Custom Color

Use a string, array of colors (auto-stepped by percentage), or a function.

50%

80%

0%

Dynamic: red → yellow → green

<script setup>
function gradient(pct) {
  if (pct < 30) return '#ef4444'
  if (pct < 70) return '#f59e0b'
  return '#22c55e'
}
</script>

<template>
  <VxProgress :percentage="50" color="#8b5cf6" />
  <VxProgress :percentage="80" color="linear-gradient(90deg, #ec4899, #8b5cf6)" />
  <VxProgress :percentage="60" :color="gradient" />
</template>

Striped

60%

75%

45%

<VxProgress :percentage="60" striped variant="info" />
<VxProgress :percentage="75" striped-animated variant="success" />

Indeterminate

0%

0%

0%

<VxProgress indeterminate />

No Text

<VxProgress :percentage="40" :show-text="false" />

Custom Format

0%

<VxProgress :percentage="75" :format="(p) => p === 100 ? 'Done!' : `${p}%`" />

Animated

0%

<script setup>
import { ref, onMounted } from 'vue'

const progress = ref(0)
onMounted(() => {
  setInterval(() => {
    progress.value = progress.value >= 100 ? 0 : progress.value + 1
  }, 80)
})
</script>

<template>
  <VxProgress :percentage="progress" variant="info" />
</template>

Circle

0%

35%

0%

80%

100%

<VxProgress type="circle" :percentage="75" variant="success" />

Circle Sizes

65%

65%

65%

<VxProgress type="circle" :percentage="65" :width="80" size="sm" />
<VxProgress type="circle" :percentage="65" />
<VxProgress type="circle" :percentage="65" :width="160" size="lg" />

Circle Custom Color

60%

85%

0%

<VxProgress type="circle" :percentage="60" color="#8b5cf6" />

Dashboard

35%

0%

80%

<VxProgress type="dashboard" :percentage="75" variant="success" />

Custom Middle Content

Use the content slot to fully customize the center of circle/dashboard progress. The slot receives percentage and label as props.

72%Complete

↓Loading

85Score

<VxProgress type="circle" :percentage="72" variant="success" :width="140">
  <template #content="{ percentage }">
    <div style="display: flex; flex-direction: column; align-items: center; gap: 2px;">
      <span style="font-size: 24px; font-weight: 700;">{{ percentage }}%</span>
      <span style="font-size: 11px; color: var(--muted-foreground);">Complete</span>
    </div>
  </template>
</VxProgress>

<VxProgress type="dashboard" :percentage="85" variant="warning" :width="140">
  <template #content="{ percentage }">
    <div style="display: flex; flex-direction: column; align-items: center;">
      <span style="font-size: 24px; font-weight: 700;">{{ percentage }}</span>
      <span style="font-size: 11px; color: var(--muted-foreground);">Score</span>
    </div>
  </template>
</VxProgress>

API

Props

Prop	Type	Default	Description
percentage	number	0	Progress value (0-100)
variant	'default' | 'success' | 'warning' | 'danger' | 'info'	'default'	Color variant
size	'xs' | 'sm' | 'default' | 'lg' | 'xl'	'default'	Bar height
type	'line' | 'circle' | 'dashboard'	'line'	Display type
strokeWidth	number	—	Custom bar/circle stroke width
showText	boolean	true	Show percentage text
textInside	boolean	false	Show text inside the bar (line only, requires lg/xl size)
format	(pct: number) => string	—	Custom label formatter
indeterminate	boolean	false	Infinite loading animation
striped	boolean	false	Striped bar pattern
stripedAnimated	boolean	false	Animated stripes
color	string | string[] | (pct: number) => string	—	Custom color (CSS color, gradient, array, or function)
width	number	120	Circle/dashboard diameter in px

Slots

Slot	Props	Description
default	—	Custom label content (replaces percentage text)
content	{ percentage: number, label: string }	Custom middle content for circle/dashboard (overrides default slot)