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

Tandai loader dekoratif aria-hidden="true". Pasang aria-busy pada area konten induk, dengan status yang awalnya kosong dan peringatan di luar area tersebut. Gunakan initSkeletonLoading dari the paket interactions untuk mengumumkan status pemuatan induk. Bentuk tidak boleh menerima fokus.

Penggunaan

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

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