Progress Bar

Doğrusal ve parçalı ilerleme görselleştirmesi.

ProgressBar.tsx

Dağıtım İşlemi (Striped)%74

Disk Alanı Kullanımı%85

Görseller & Varlıklar (%45)

Derlenmiş Kod (%25)

Önbellek & Loglar (%15)

Arka Plan Senkronizasyonu

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/progress-bar.json

import { ProgressBar } from "@/components/ui/ProgressBar"

<ProgressBar label="Yükleme" value={72} variant="success" />

Prop	Tür	Varsayılan	Açıklama
value	number	0	0-100 arasında ilerleme değeri.
segments	ProgressSegment[]	—	Çok parçalı ilerleme değerleri.
label	ReactNode	—	İlerleme etiketi.
showValue	boolean	true	Yüzde değerini gösterir.
variant	"default" \| "success" \| "warning" \| "neutral" \| "danger" \| "sage"	"default"	Çubuk rengi.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"md"	Çubuk kalınlığı.
indeterminate	boolean	false	Belirsiz ilerleme animasyonu.