Spinner

Ne zaman kullanılır

Spinner, süresi bilinmeyen ve yaklaşık bir saniyeyi aşan kısa bir bekleme içindir: bir panelin yüklenmesi, bir değişikliğin kaydedilmesi.

Ne zaman kullanılmaz

• İçeriğin biçimi biliniyorsa: Skeleton kullanın.
• İlerleme ölçülebiliyorsa: İlerleme çubuğu kullanın.
• Bir düğmenin işlemi için: Button loading kullanın.
• Bir anahtarın kaydı için: Switch loading kullanın.

Anatomi

Kaydediliyor

AçıkKoyu

Kodu kopyala

import { Spinner } from '@bigbang/ui';

export default function WithText() {
  return (
    <div role="status" className="flex items-center gap-sm type-body-md text-fg-subtle">
      <Spinner decorative />
      <span>Kaydediliyor</span>
    </div>
  );
}

1. Yay: Yaklaşık 300° açık, yuvarlak uçlu, izsiz dönen yay.
2. Etiket: Görünmeyen ya da görünür durum metni.

Davranış

• Yay period-spinner (1000 ms) süresiyle döner.
• Azaltılmış harekette dönüş durur; durum metinle bildirilir.
• role="status" ekleme anında duyurulmayabilir; durumu kesin duyurmak için önceden var olan bir durum bölgesi kullanın.

Yönergeler

• Bir seferde bir yükleme göstergesi gösterin.
• Bir saniyeden kısa beklemeler için gösterge eklemeyin.
• Yükleme on saniyeyi aşabiliyorsa neyin yüklendiğini görünür metinle söyleyin.

İçerik

• label neyin yüklendiğini söyler: “Sonuçlar yükleniyor”.
• Varsayılan metin kütüphane metnidir.

Türkçe	İngilizce
Yükleniyor	Loading
Kaydediliyor	Saving

İlgili bileşenler

• Button: Düğme içinde yükleme durumu.
• Switch: Anahtar içinde kayıt durumu.