Lewati ke konten
Kerangka muat
Dokumentasi

Kerangka muat

Pengganti sementara saat data dimuat. Bentuknya harus menyerupai konten akhir supaya tata letak tidak melompat.

Kartu daftar sedang dimuat

Tiga baris, masing-masing avatar + dua baris teks.

Lihat kode
<div class="ck-card"><div class="ck-card__body ck-p-6">
  <div class="ck-row ck-row-3" style="padding:.75rem 0">
    <div class="ck-skeleton ck-skeleton--avatar"></div>
    <div class="ck-grow ck-stack ck-stack-2">
      <div class="ck-skeleton ck-skeleton--text" style="width:40%"></div>
      <div class="ck-skeleton ck-skeleton--text" style="width:65%"></div>
    </div>
  </div>
  <div class="ck-row ck-row-3" style="padding:.75rem 0">
    <div class="ck-skeleton ck-skeleton--avatar"></div>
    <div class="ck-grow ck-stack ck-stack-2">
      <div class="ck-skeleton ck-skeleton--text" style="width:40%"></div>
      <div class="ck-skeleton ck-skeleton--text" style="width:65%"></div>
    </div>
  </div>
  <div class="ck-row ck-row-3" style="padding:.75rem 0">
    <div class="ck-skeleton ck-skeleton--avatar"></div>
    <div class="ck-grow ck-stack ck-stack-2">
      <div class="ck-skeleton ck-skeleton--text" style="width:40%"></div>
      <div class="ck-skeleton ck-skeleton--text" style="width:65%"></div>
    </div>
  </div>
</div></div>
classroom-themekitv1.0.0