Progress

Jarayonni zamonaviy bar yoki doiraviy indikatorlar bilan koʻrsating.

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

String, ranglar massivi (foiz boʻyicha avtomatik bosqichlanadi) yoki funksiyadan foydalaning.

50%

80%

0%

Dinamik: qizil → sariq → yashil

<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

Circle/dashboard progressning markazini toʻliq moslashtirish uchun content slotdan foydalaning. Slot percentage va label ni prop sifatida oladi.

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 qiymati (0-100)
variant	'default' | 'success' | 'warning' | 'danger' | 'info'	'default'	Rang varianti
size	'xs' | 'sm' | 'default' | 'lg' | 'xl'	'default'	Bar balandligi
type	'line' | 'circle' | 'dashboard'	'line'	Koʻrsatish turi
strokeWidth	number	—	Maxsus bar/circle stroke kengligi
showText	boolean	true	Foiz matnini koʻrsatish
textInside	boolean	false	Matnni bar ichida koʻrsatish (faqat line, lg/xl oʻlcham talab qilinadi)
format	(pct: number) => string	—	Maxsus label formatlovchisi
indeterminate	boolean	false	Cheksiz yuklash animatsiyasi
striped	boolean	false	Chiziqli bar namunasi
stripedAnimated	boolean	false	Animatsiyali chiziqlar
color	string | string[] | (pct: number) => string	—	Maxsus rang (CSS color, gradient, massiv yoki funksiya)
width	number	120	Circle/dashboard diametri (px)

Slots

Slot	Props	Description
default	—	Maxsus label kontenti (foiz matnining oʻrnini bosadi)
content	{ percentage: number, label: string }	Circle/dashboard uchun maxsus oʻrta kontent (default slotni bekor qiladi)