Loading State

Tutarlı içerik yükleme sunumu.

LoadingState.tsx

Tasarım Varlıkları Senkronize Ediliyor...

CSS değişkenleri ve ikon setleri derleme dizinine kopyalanıyor (%68 tamamlandı).

%68

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/loading-state.json

Kullanım Örneği

import { LoadingState } from "@/components/feedback/LoadingState"

<LoadingState
  variant="progress"
  message="Dosyalar işleniyor"
  progress={uploadProgress}
/>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
message	ReactNode	"İçerik yükleniyor..."	Yükleme başlığı.
description	ReactNode	—	İsteğe bağlı yardımcı açıklama.
variant	"card" \| "minimal" \| "progress"	"card"	Yükleme yüzeyinin görsel sunumu.
progress	number	—	Bilinen ilerleme yüzdesi; verilmezse belirsiz çubuk gösterilir.
spinnerVariant	SpinnerVariant	"sage"	Spinner renk teması.
headingLevel	2 \| 3 \| 4 \| 5 \| 6	3	Mesaj başlığının seviyesi.
progressLabel	string	"Yükleme ilerlemesi"	İlerleme çubuğunun erişilebilir adı.