Spinner

35 · UI öğeleri

Bir işlem sürerken yükleniyor durumunu gösterir. Düğmelerde acun:button'ın loading prop'unu, bir alanı kilitlemek için acun:loading-overlay'i kullanın; spinner geri kalan yerler içindir.

acun:spinner

Boyutlar

size göstergenin çapını belirler; varsayılan md. Metin satırının yanında sm, boş bir alanın ortasında lg uygundur.

CANLI ÖRNEK

<div class="flex flex-wrap items-center gap-6">
    <acun:spinner size="sm" />
    <acun:spinner />
    <acun:spinner size="lg" />
</div>

Prop	Değerler
`size`	sm \| md \| lg

Türler

Varsayılan border dönen bir halkadır; grow büyüyüp sönen bir noktadır. Hareket azaltma açıksa halka yavaş döner, nokta durur.

CANLI ÖRNEK

<div class="flex flex-wrap items-center gap-6">
    <acun:spinner />
    <acun:spinner type="grow" />
</div>

Prop	Değerler
`type`	border \| grow

Renkler

Gösterge metin rengini kullanır; varsayılanı marka rengidir. Başka bir renk için text-* sınıfı verin.

CANLI ÖRNEK

<div class="flex flex-wrap items-center gap-6">
    <acun:spinner class="text-emerald-600" />
    <acun:spinner class="text-amber-500" />
    <acun:spinner class="text-red-600" type="grow" />
    <acun:spinner class="text-gray-400" type="grow" />
</div>

Prop	Değerler
`class`	text-* renk sınıfı

Ekran okuyucu metni

Gösterge role="status" taşır ve ekran okuyucuya görünmeyen bir metin okutur; varsayılanı "Yükleniyor"dur. Neyin yüklendiğini label ile belirtin.

CANLI ÖRNEK

<acun:spinner label="Müşteri listesi yükleniyor" />

Prop	Değerler
`label`	Ekran okuyucu metni

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`size`	`md`	sm · md · lg
`type`	`border`	border · grow
`label`	`Yükleniyor`	Ekran okuyucu metni
`color`	`primary`	primary · secondary · success · danger · warning · info · dark