Loading Bileşeni Örnekleri

Basit Kullanım

En temel loading spinner kullanımı.

<Loading />

Boyut Varyantları

Farklı boyutlarda loading spinner örnekleri.

<Loading sizeVariant="sm" />
<Loading sizeVariant="md" />
<Loading sizeVariant="lg" />
<Loading sizeVariant="xl" />

Tip Varyantları

Farklı tiplerde loading spinner örnekleri.

<Loading type="spinner" />
<Loading type="dots" />
<Loading type="skeleton" />

Metin ile Kullanım

Loading spinner'ı açıklayıcı metin ile birlikte kullanım.

Yükleniyor...

<div className="flex items-center gap-2">
  <Loading />
  <span>Yükleniyor...</span>
</div>

Buton İçinde Kullanım

Loading spinner'ı buton içerisinde kullanım örneği.

<button className="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-md">
  <Loading size="sm" className="text-white" />
  <span>İşleniyor</span>
</button>

Tam Sayfa Loading

Sayfanın tamamını kaplayan loading örneği.

<Loading size="lg" />