CSS: skeleton-loader

.instui-skeleton-loader — Penampung dekoratif untuk konten yang belum dimuat.

TIP

Peningkatan JS — CSS komponen ini merender dan berfungsi sendiri; padukan dengan @pantoken/interactions untuk menambahkan perilaku interaktif. Lihat modifier table below.

Aksesibilitas

Mark the decorative loader aria-hidden="true". Put aria-busy on the parent content region, with an initially empty status and alert outside that region. Use initSkeletonLoading from the interactions package to announce the parent's loading state. Shapes must not receive focus.

Penggunaan

@import "@pantoken/plugin-custom-components/custom-components.css";

Contoh

<div style="display: flex; align-items: center; gap: 1rem; max-inline-size: 24rem">
  <div class="instui-skeleton-loader -type-avatar" aria-hidden="true">
    <div class="shape"></div>
  </div>
  <div style="flex: 1">
    <div class="instui-skeleton-loader -type-text -size-md" aria-hidden="true">
      <div class="skeleton-row" style="inline-size: 45%"><div class="shape"></div></div>
      <div class="skeleton-row" style="inline-size: 72%"><div class="shape"></div></div>
    </div>
  </div>
</div>

Struktur

.instui-skeleton-loader
  .shape
  .skeleton-row (0..n)
    .shape

flowchart TD n0[".instui-skeleton-loader"]:::cssdoc-root n1(".shape"):::cssdoc-part n2(".skeleton-row"):::cssdoc-part n3(".shape"):::cssdoc-part n0 --> n1 n2 --> n3 n0 -->|0..n| n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modifikator

Modifikator	Deskripsi
.-size-lg	Baris teks besar.
.-size-md	Baris teks sedang (default).
.-size-sm	Baris teks kecil.
.-size-xl	Baris teks ekstra-besar.
.-size-xs	Baris teks ekstra-kecil.
.-size-xxl	Baris teks terbesar.
.-size-xxs	Baris teks berukuran legenda.
.-type-avatar	Penampung avatar bundar, hanya ukuran sedang.
.-type-image	Penampung gambar, hanya ukuran sedang.
.-type-text	Bilah teks (default).

Bagian

Bagian	Deskripsi
.shape	Permukaan penampung yang dipangkas dan disesuaikan ukurannya untuk jenis pemuat yang dipilih.
.skeleton-row	Pembungkus baris-teks berulang yang menerapkan spasi vertikal.

Pseudo-elemen

Pseudo-elemen	Deskripsi
::before	—

Properti khusus

Properti	Tipe	Bawaan	Deskripsi
--pantoken-skeleton-sweep	<percentage>	0%	—

Animasi

Animasi	Deskripsi
pantoken-skeleton-sweep	—

Kondisi

Tipe	Kueri	Deskripsi
media	(prefers-reduced-motion: reduce)	—

Token yang digunakan

Token	Tipe	Nilai
--instui-component-skeleton-loader-avatar-border-radius	<length>	999rem
--instui-component-skeleton-loader-background-color	<color>	LightDarklight-dark(#8D959F, #5F6E7A)
--instui-component-skeleton-loader-bezier	—	0.42, 0, 0.58, 1
--instui-component-skeleton-loader-duration	<time>	1500ms
--instui-component-skeleton-loader-image-border-radius	<length>	0.5rem
--instui-component-skeleton-loader-shimmer-color	<color>	LightDarklight-dark(#AAB0B5, #737F8A)
--instui-component-skeleton-loader-text-border-radius	<length>	0.25rem
--instui-component-skeleton-loader-text-height-lg	<length>	1.75rem
--instui-component-skeleton-loader-text-height-md	<length>	1.5rem
--instui-component-skeleton-loader-text-height-sm	<length>	1.25rem
--instui-component-skeleton-loader-text-height-xl	<length>	2rem
--instui-component-skeleton-loader-text-height-xs	<length>	1rem
--instui-component-skeleton-loader-text-height-xxl	<length>	2.25rem
--instui-component-skeleton-loader-text-height-xxs	<length>	0.75rem
--instui-component-skeleton-loader-text-padding-lg	<length>	0.21875rem
--instui-component-skeleton-loader-text-padding-md	<length>	0.1875rem
--instui-component-skeleton-loader-text-padding-sm	<length>	0.15625rem
--instui-component-skeleton-loader-text-padding-xl	<length>	0.25rem
--instui-component-skeleton-loader-text-padding-xs	<length>	0.125rem
--instui-component-skeleton-loader-text-padding-xxl	<length>	0.28125rem
--instui-component-skeleton-loader-text-padding-xxs	<length>	0.1875rem
--instui-size-interactive-height-md	<length>	2.5rem
--pantoken-skeleton-height	<length>	1.5rem
--pantoken-skeleton-padding	<length>	0.1875rem
--pantoken-skeleton-radius	<length>	0.25rem