Geri bildirim · Spinner

Yükleniyor

Bir işlemin sürdüğünü ve süresinin bilinmediğini gösterir.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

Başvurunuz sorgulanıyor

HTML kodunu göster

<div class="trds-yukleniyor" role="status">
  <span class="trds-yukleniyor__halka" aria-hidden="true"></span>
  <span>Başvurunuz sorgulanıyor</span>
</div>

Ne zaman kullanılır

Sorgu 1 saniyeden uzun sürüyorsa gösterin.
Süre biliniyorsa ilerleme çubuğu kullanın.
10 saniyeden uzun sürerse metin ekleyin: "Bu işlem bir dakika sürebilir."

Erişilebilirlik

role="status" ile durum bir kez duyurulur. aria-live="assertive" kullanılmaz.
Dönme hareketi prefers-reduced-motion ile durur, halka yine görünür.
Görsel yanında her zaman metin bulunur.

Karşılanan WCAG 2.2 ölçütleri 2.3.3 4.1.3

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: IE, KR, DK, DE, NO.