Geri bildirim · Skeleton

İskelet

İçerik yüklenirken yerini tutan gri şekiller. Sayfa zıplamaz.

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

Örnekler

Kart yerine Canlı örnek

HTML kodunu göster

<div class="kiris-kart" aria-busy="true">
  <span class="kiris-iskelet kiris-iskelet--baslik"></span>
  <span class="kiris-iskelet kiris-iskelet--satir"></span>
  <span class="kiris-iskelet kiris-iskelet--satir"></span>
  <span class="kiris-iskelet kiris-iskelet--satir kiris-iskelet--kisa"></span>
</div>

Ne zaman kullanılır

Bir liste veya kart 1 saniyeden geç geliyorsa kullanın.
Bir düğmenin sonucu için kullanmayın. Orada yükleniyor halkası durur.

Erişilebilirlik

Kap aria-busy="true" taşır. İçerik gelince kalkar.
Hareket azaltma isteyen kullanıcıda parıltı durur.

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: NO.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-skeleton ile başlayan sınıflar