Dönen yükleyici spinner / loader

bilinen diğer adları spinner · loader · dönen halka · yükleniyor göstergesi

Böyle diyorsan: "dönen yuvarlak" · "bekleme çemberi" → bunun adı dönen yükleyici.

'Bekle, çalışıyorum' anlamına gelen dönen halka; süre bilinmiyorsa kullanılır.

Spinner, süresi bilinmeyen bir işin sürdüğünü söyler. Verdiği bilgi azdır ve bu bilinçlidir — 'çalışıyorum' der, 'ne kadar sürecek' demez. Doğru kullanıldığı yer kısa ve yeri belli beklemelerdir: bir butona basıldığında butonun içinde, bir bölüm yenilenirken o bölümün üstünde. Yanlış kullanıldığı yer ise koca bir sayfanın ortasında tek başına dönmesidir; orada kullanıcı ne geldiğini bilmez, ne kadar bekleyeceğini bilmez ve iskelet yüklemenin verebileceği yapı bilgisinden de mahrum kalır. Bir de görünürlük eşiği vardır: çok kısa işlerde beliren ve hemen kaybolan spinner, yardım değil görsel gürültüdür.

Kapsam: Bu madde süresi bilinmeyen bekleme göstergesini kapsar. Yüzde biliniyorsa İlerleme Çubuğu, gelecek içeriğin yapısı biliniyorsa İskelet Yükleme daha iyi seçimlerdir; spinner üçünün en az bilgi vereni olduğu için son çare sayılır.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı

Aşama aşama gezmek için okları ya da numaraları kullan.

YAPIM PROMPTU — AJANINA YAPIŞTIR

Kaydet akışına spinner ekle: tıklanınca buton disabled olsun ve içinde küçük spinner + 'Kaydediliyor...' görünsün; iş bitince ✓ ile normale dönsün; 10 sn'de cevap gelmezse zaman aşımı hatası göster (sonsuz spinner yasak); aria-busy işaretlensin; prefers-reduced-motion'da dönme yerine sabit gösterge kullanılsın.

DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Spinner'ım huysuz; klasikleri sırayla ele: (1) spinner dönüyor ama buton kilitlenmemiş — çift tıklama çift sipariş yarattı; (2) hata yutulunca spinner SONSUZ dönüyor (timeout yok); (3) minik bir alan güncellenirken TÜM sayfaya spinner basılıyor; (4) eşlik metni yok — ne beklendiği belirsiz; (5) reduce-motion tercihi yok sayılıyor. Belirti şu:

ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)

1Halkadönen gösterge
'Çalışıyorum' sinyali; süresi BİLİNMEYEN kısa beklemeler içindir — uzun işte yüzde/iskelet daha dürüsttür.
2Bağlambuton içi / alan / sayfa
Spinner işin OLDUĞU yerde döner: butonda tıklandıysa butonun içinde — tüm sayfayı kilitlemek son çaredir.
3Eşlik metni'Kaydediliyor...'
Ne beklendiğini söyleyen kısa metin; okuyucu için aria-busy/status ile desteklenir.
4Kilitdisabled
Spinner dönerken tetikleyen buton KİLİTLENİR — çift tıklama çift kayıt üretmesin.

DURUMLAR — HANGİ HÂLDE NE OLUR

AGizlieşik altı
İş çok kısa sürdü. Yaklaşık bir saniyenin altındaki beklemelerde spinner göstermemek daha iyidir; belirip kaybolan halka arayüzü titrek gösterir.
BGörünüraria-busy + role=status
Bekleme sürüyor. Ekran okuyucuya da bildirilmeli; yalnız dönen bir görsel, görmeyen kullanıcı için sessizliktir.
CButon içindebuton disabled
En doğru kullanımı. Buton bekleme boyunca devre dışı kalır — hem geri bildirim verir hem çift gönderimi engeller.
DUzayan beklemeaçıklama ekle
Birkaç saniyeyi geçtiyse spinner yetmez: ne beklendiğini yaz ('Ödeme doğrulanıyor'), gerekirse iptal sun.
EHareket kapalıprefers-reduced-motion
Kullanıcı hareketi azalt dediyse dönmeyi sadeleştir; bekleme bilgisi kalmalı ama sürekli dönen animasyon kalkmalı.

KODDAKİ ADLARI

ARIA	aria-busy + role=status	okuyucuya bekleme
UX	buton-içi spinner + disabled	yerinde geri bildirim + çift-tık koruması
CSS	prefers-reduced-motion	hareket hassasiyeti

ERİŞİLEBİLİRLİK & SIK HATA

Beklemeyi ekran okuyucuya bildir: aria-busy ya da role="status" ile 'yükleniyor' duyurulmalı. Dönen bir görsel tek başına hiçbir şey söylemez.
Odağı kaybetme. İçerik gelince odak, kullanıcının bulunduğu yerden savrulmamalı; buton içi spinner bu sorunu doğal olarak çözer.
Sürekli dönen animasyonu prefers-reduced-motion açıkken sadeleştir (WCAG 2.2.2); hareket hassasiyeti olan kullanıcılar için sürekli dönme rahatsız edicidir.
Bir saniyenin altındaki beklemelerde gösterme; belirip kaybolan spinner yardım değil görsel gürültüdür.
Uzun beklemede yalnız halka bırakma: ne beklendiğini yazıyla söyle, mümkünse iptal imkânı sun.

SIK KARIŞTIRILANLAR

İskelet yüklemeden farkı. Spinner 'bekle' der, iskelet 'ne geleceğini' gösterir. Gelecek içeriğin yapısı biliniyorsa iskelet daha iyidir: kullanıcı sayfanın şeklini önceden görür, içerik gelince yerleşim zıplamaz ve bekleme daha kısa hissedilir. Spinner'ı yapının bilinmediği ya da tek bir küçük işin beklendiği yerlerde kullan.

İskelet yükleme sayfasına git →

İlerleme çubuğundan farkı. Spinner süreyi BİLMEDİĞİNİ kabul eder, ilerleme çubuğu bildiğini iddia eder. Bilmediğin hâlde çubuk göstermek kullanıcıya olmayan bir bilgi vaat etmektir. Dürüst sıralama şudur: yüzdeyi biliyorsan çubuk, bilmiyorsan spinner — arada 'idare etsin' diye sahte çubuk yoktur.

İlerleme çubuğu sayfasına git →

KAYNAKLAR

standartMDN — aria-busy ↗
Bir bölgenin güncellenmekte olduğunu bildirmenin yolu.
standartMDN — role="status" ↗
Bekleme durumunun kibar duyurulması.
standartW3C — WCAG 2.2, Pause, Stop, Hide (2.2.2) ↗
Sürekli hareketin durdurulabilmesi şartı.
standartMDN — prefers-reduced-motion ↗
Hareket azaltma tercihini okumanın yolu.

İLGİLİ PARÇALAR

İskelet yükleme skeleton İlerleme çubuğu progress bar Kısa bildirim toast / snackbar Boş durum empty state

AYNI AİLEDE · GERI BILDIRIM