Skeleton
Placeholder yang menyerupai bentuk konten selama data sedang dimuat.
Dasar
Susun beberapa skeleton mengikuti panjang dan posisi konten aslinya. Default berupa baris teks setinggi 16 px dengan lebar penuh.
Bentuk dan ukuran
Variant text untuk baris teks, rect untuk blok, dan circle untuk avatar. width/height menerima angka piksel atau string CSS. Lingkaran memakai rasio 1:1 jika height tidak diisi.
Tanpa animasi
Set animated=false untuk placeholder statis. Animasi juga otomatis berhenti ketika pengguna memilih reduced motion.
Contoh memuat data
Gunakan aria-busy pada area data dan satu pesan status untuk seluruh proses. Tombol di bawah mensimulasikan pemuatan data, kemudian mengganti skeleton dengan konten.
Ringkasan pickup
Ringkasan pickup siap.
120 kg terkumpul
Dari 4 kali pengangkutan bulan ini.
API
Props
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| variant | 'text' | 'rect' | 'circle' | 'text' | Bentuk placeholder. |
| width | number | string | 100%; circle: 40px | Lebar piksel atau CSS, dibatasi lebar wadah. |
| height | number | string | text: 16px; rect: 96px | Tinggi piksel atau CSS. Circle mengikuti lebarnya jika tidak diisi. |
| animated | boolean | true | Animasi pulse; tetap menghormati prefers-reduced-motion. |
Tidak ada slot atau event khusus. Atribut HTML dan class tata letak diteruskan ke elemen pembungkus.