CSS: skeleton-loader

.instui-skeleton-loader — Pemegang tempat hiasan untuk kandungan yang belum dimuatkan lagi.

TIP

Peningkatan JS — CSS komponen ini merender dan berfungsi sendiri; padankan dengan @pantoken/interactions untuk menambah tingkah laku interaktif. Lihat jadual pengubah di bawah.

Aksesibiliti

Tandakan pemuat hiasan aria-hidden="true". Put aria-busy pada kawasan kandungan induk, dengan status yang pada mulanya kosong dan amaran di luar kawasan tersebut. Gunakan initSkeletonLoading dari the interactions package untuk mengumumkan keadaan pemuatan induk. Bentuk tidak boleh menerima fokus.

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;

Pemodifikasi

Pemodifikasi	Penerangan
.-size-lg	Baris teks besar.
.-size-md	Baris teks sederhana (lalai).
.-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 saiz legenda.
.-type-avatar	Pemegang tempat avatar bulat, saiz sederhana sahaja.
.-type-image	Pemegang tempat imej, saiz sederhana sahaja.
.-type-text	Bar teks (lalai).

Bahagian

Bahagian	Penerangan
.shape	Permukaan pemegang tempat yang dipotong bersaiz untuk jenis pemuat yang dipilih.
.skeleton-row	Pembalut baris-teks berulang yang menerapkan jarak menegak.

Pseudo-elemen

Pseudo-elemen	Penerangan
::before	—

Hartanah tersuai

Sifat	Jenis	Lalai	Penerangan
--pantoken-skeleton-sweep	<percentage>	0%	—

Animasi

Animasi	Penerangan
pantoken-skeleton-sweep	—

Syarat

Jenis	Pertanyaan	Penerangan
media	(prefers-reduced-motion: reduce)	—

Token digunakan

Token	Jenis	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