M.AIM.AISoloLabsUI Sözlüğü · Geri bildirim

← UI Sözlüğü

İlerleme çubuğu progress bar

bilinen diğer adları progress bar · ilerleme göstergesi · yükleme çubuğu

Böyle diyorsan: "dolan çubuk" · "yüzde göstergesi" → bunun adı i̇lerleme çubuğu.

Bir işin yüzde kaçının bittiğini gösteren dolan çubuk.

İlerleme çubuğu, süren bir işin ne kadarının bittiğini gösterir. Var olma sebebi tek bir soruya cevap vermektir: daha ne kadar? Bu yüzden en büyük ihaneti sahte olmasıdır — gerçek yüzdeyi bilmeden animasyon oynatmak kullanıcıya bilgi vermek değil onu oyalamaktır ve bir kez fark edildiğinde bütün göstergelere olan güveni bitirir. Yüzde bilinmiyorsa dürüst yol bunu söylemektir: belirsiz (indeterminate) hâl ya da spinner. İkinci kural bağlamdır: %73 tek başına anlamsızdır, '%73 · 12 dosyadan 9'u' anlamlıdır.

Kapsam: Bu madde ölçülebilir ilerlemeyi gösteren ÇIKTIYI kapsar. Kullanıcının değer seçtiği benzer görünüşlü kontrol Sürgü maddesindedir; süre bilinmiyorken kullanılan dönen halka ise Spinner maddesinde.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
📄 yedek-2026.zip%0
yükleniyor — kalan ~%100
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Yükleme akışına progress bar ekle: gerçek ilerleme olayından beslenen dolum + aynı kaynaktan yüzde etiketi; süre bilinmiyorsa yüzdeli bar yerine indeterminate (akan) gösterim kullan; %100 olunca ✓ tamamlandı durumuna geçsin; aria-valuenow ile okuyucuya da aksın; bar asla geri gitmesin.
DEBUG PROMPTU — HUYSUZLANIRSA

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

Progress bar'ım huysuz; klasikleri sırayla ele: (1) %100'e ulaşıyor ama 'bitti' sinyali gelmiyor — kullanıcı asılı barın karşısında bekliyor; (2) süre bilinmeyen işte sahte yüzde akıtılıyor (%90'da sürünme sendromu) — indeterminate kullanılmalıydı; (3) yüzde etiketi ile bar ayrı kaynaklardan, çelişiyorlar; (4) parça parça yüklemede bar GERİ gidiyor; (5) aria yok, okuyucu ilerlemeyi bilmiyor. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Rayarka plan çubuğu

    Yüzde 100'ün temsili; dolum bununla oranlanır.

  • 2Dolumwidth: %N

    Bitmiş kısmın rengi; SADECE İLERİ gider — geri giden bar güveni öldürür.

  • 3Yüzde etiketi%64

    Sayısal gerçek; bar ile AYNI kaynaktan beslenir, ayrı yaşarsa çelişirler.

  • 4Tamamlanma%100 + ✓ durumu

    Bitince bar yeşile döner ve İŞ BİTTİ sinyali ayrıca verilir — %100'de asılı bar 'takıldı' hissi verir.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • ABelirlivalue + max

    Yüzde biliniyor. Gerçek veriye dayanmalı; bilinmeyen bir işi %90'a getirip bekletmek en yaygın sahtekârlıktır.

  • BBelirsizvalue yok

    İş sürüyor ama süre bilinmiyor. Dürüst hâl budur — sahte yüzde uydurmak yerine belirsiz göster ya da spinner kullan.

  • CDuraklatıldıaria-valuenow sabit

    İş durdu ama bitmedi. Çubuğun donması ile işin bitmesi görsel olarak ayrılmalı, yoksa kullanıcı tamamlandı sanır.

  • DTamamlandı%100 + sonuç

    %100 tek başına yetmez: ardından ne olduğu söylenmeli. Dolu bir çubuk bırakıp kaybolmak, kullanıcıyı işin başarılı olup olmadığından emin bırakmaz.

  • EHatalıkırmızı + sebep

    İş yarıda kesildi. Çubuğu sessizce sıfırlama; nerede ve neden kesildiğini söyle, tekrar deneme yolu sun.

KODDAKİ ADLARI
HTML<progress value max>native eleman
ARIArole=progressbar + aria-valuenowerişilebilir değer
UXdeterminate vs indeterminatebilinen/bilinmeyen süre ayrımı
ERİŞİLEBİLİRLİK & SIK HATA
  • role="progressbar" ile aria-valuenow/valuemin/valuemax kullan; yerleşik <progress> bunu hazır verir. Yalnız görsel bir çubuk, ekran okuyucu kullanıcısı için hiçbir şey söylemez.
  • Belirsiz hâlde aria-valuenow VERME — değer yokluğu, süreyi bilmediğini anlatan bilgidir; sahte bir değer koymak yanlış bilgi vermektir.
  • Yüzdeyi bağlamıyla yaz: '%73' değil '%73 · 12 dosyadan 9'u'. Sayı tek başına ne kadar beklenmesi gerektiğini söylemez.
  • Sürekli hareket eden çizgili/animasyonlu çubukları prefers-reduced-motion açıkken durdur (WCAG 2.2.2).
  • Uzun işlerde ilerlemeyi ölçülü duyur: her yüzde değişiminde konuşan bir canlı bölge, ekran okuyucu kullanıcısını sağır eder — eşiklerde duyur.
SIK KARIŞTIRILANLAR

Spinner'dan farkı. İlerleme çubuğu 'ne kadar kaldığını' söyler, spinner yalnız 'çalışıyorum' der. Seçim dürüstlük meselesidir: yüzdeyi gerçekten biliyorsan çubuk, bilmiyorsan spinner. Bilmediğin hâlde çubuk göstermek, kullanıcıya olmayan bir bilgi vaat etmektir — ve bu, ilerleme göstergelerine olan güveni topluca bitiren şeydir.

Dönen yükleyici sayfasına git →

Sürgüden farkı. İlerleme çubuğu ÇIKTIdır, sürgü GİRDİdir. İkisi de dolu bir çubuk gösterir ama birinin değerini sistem bildirir, diğerininkini kullanıcı belirler. Ayırt etmenin en hızlı yolu tutamaçtır: tutamaç varsa sürgü, yoksa ilerleme. İlerleme çubuğuna tutamaç çizmek kullanıcıyı boşuna sürüklemeye davet eder.

Sürgü sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Dönen yükleyici spinner / loaderİskelet yükleme skeletonSürgü sliderDosya yükleme file upload

AYNI AİLEDE · GERI BILDIRIM