Spinner

İsteğe bağlı durum etiketine sahip kompakt yükleme göstergesi.

Spinner.tsx

Varyantlar & Boyutlar

Bileşen yükleniyor...

Alt Başlıklı Kart Yükleme

Veriler senkronize ediliyor...

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/spinner.json

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

<Spinner label="Veriler yükleniyor" />
<Spinner size="sm" variant="current" decorative />

Prop	Tür	Varsayılan	Açıklama
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"md"	Gösterge çapı ve kenarlık kalınlığı.
variant	"primary" \| "secondary" \| "sage" \| "success" \| "danger" \| "white" \| "current"	"primary"	Gösterge rengi.
label	ReactNode	—	Göstergenin yanında veya altında görünen içerik.
labelPosition	"right" \| "bottom"	"right"	Görünen etiketin konumu.
loadingLabel	string	"Yükleniyor"	Ekran okuyucu durum metni.
decorative	boolean	false	Spinner öğesini erişilebilirlik ağacından gizler.
indicatorClassName	string	—	Dönen gösterge için ek sınıflar.
labelClassName	string	—	Görünen etiket için ek sınıflar.