Components · Loading

Progress & Spinner

Bekleme anlarının görsel kayıtları. Determinate progress: bilinen tamamlanma yüzdesi (yükleme, dışa aktarma). Indeterminate: süresi belirsiz bekleme. Spinner: küçük, lokalize aksiyon. Step progress: çok-adımlı akış (onboarding, sipariş ilerlemesi).

01 · Linear progress

Determinate & indeterminate; sm/md/lg
Determinate · 24%
24%
Determinate · 67%
67%
Tamamlandı · 100%
100%
Indeterminate
Small (sm · 4px)
48%
Large (lg · 10px)
82%

02 · Spinner

Circular indeterminate — küçük lokal yükleme
sm · 14px
md · 20px
lg · 32px
on dark
button busy state
refresh-busy

03 · Determinate ring

İçinde yüzde — küçük metric kart için
24%
60%
100%

04 · Step progress

Sipariş yaşam döngüsü, onboarding
Sipariş · 3/5
Yeni → Hazırlanıyor → Hazır· Yolda
Onboarding · 2/4
İşletme · Menü· Ödeme · Yayına al
Yükleme · 1/3
Görsel· İşleme · Yayın

Kurallar

· Determinate ne zaman? Tamamlanma yüzdesini güvenle hesaplayabiliyorsan kullan; tahmin et ve düzelteceksen kullanma — geri giden progress en büyük UX hatası.
· Indeterminate ne zaman? Süre belirsiz, ama 1 saniyeden uzun. 200ms'den kısa beklemelerde hiç gösterme — flash hissi yaratır.
· Spinner button içinde ikon yerine geçer; metin imperatif → şimdiki zaman'a döner ("Gönder" → "Gönderiliyor…"). Buton hala aynı genişlikte (CLS yok).
· Track rengi her zaman --nb-color-border; fill --nb-primary. Status renkleri (warning/danger) progress'te kullanılmaz.
· Step progress 5 segmentten sonra "X / N" sayacına çevir — bar fazla bölünür, okunmaz.
· Erişilebilirlik: role="progressbar" + aria-valuenow/min/max; indeterminate'de yalnızca aria-busy. Spinner'a aria-label="Yükleniyor".
· prefers-reduced-motion: reduce'da animasyonlar duraklatılmaz ama hız 50%'ye iner; tamamen durdurma → kullanıcı yükleme bilgisini kaybeder.