Progress

Отображение прогресса с помощью современных полосчатых или круговых индикаторов.

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

Используйте строку, массив цветов (авторазбиваемый по процентам) или функцию.

50%

80%

0%

Динамически: красный → жёлтый → зелёный

<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

Используйте слот content, чтобы полностью настроить центр прогресса circle/dashboard. Слот получает percentage и label в качестве свойств.

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	Значение прогресса (0–100)
variant	'default' | 'success' | 'warning' | 'danger' | 'info'	'default'	Цветовой вариант
size	'xs' | 'sm' | 'default' | 'lg' | 'xl'	'default'	Высота полосы
type	'line' | 'circle' | 'dashboard'	'line'	Тип отображения
strokeWidth	number	—	Пользовательская толщина линии полосы/круга
showText	boolean	true	Показывать текст процента
textInside	boolean	false	Показывать текст внутри полосы (только line, требуется размер lg/xl)
format	(pct: number) => string	—	Пользовательский форматтер метки
indeterminate	boolean	false	Бесконечная анимация загрузки
striped	boolean	false	Полосатый узор
stripedAnimated	boolean	false	Анимированные полосы
color	string | string[] | (pct: number) => string	—	Пользовательский цвет (CSS-цвет, градиент, массив или функция)
width	number	120	Диаметр circle/dashboard в px

Slots

Slot	Props	Description
default	—	Пользовательское содержимое метки (заменяет текст процента)
content	{ percentage: number, label: string }	Пользовательское содержимое центра для circle/dashboard (переопределяет default-слот)