CSS: skeleton-loader

.instui-skeleton-loader — Dekorativ plasshaldar for innhald som ikkje har lasta ennå.

TIP

JS-forbetring — Denne komponenten sin CSS rendrar og fungerer sjølvstendig; par han med @pantoken/interactions for å leggje til den interaktive åtferda. Sjå modifier table below.

Tilgjenge

Marker den dekorative lastaren aria-hidden="true". Put aria-busy on the parent content region, med ein fyrst tom status og eit varsel utanfor den regionen. Use initSkeletonLoading from the interactions package to announce the parent's loading state. Shapes must not receive focus.

Bruk

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

Døme

<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;

Modifikatorar

Modifikator	Skildring
.-size-lg	Stor tekstrad.
.-size-md	Middels tekstrad (default).
.-size-sm	Liten tekstrad.
.-size-xl	Ekstra stor tekstrad.
.-size-xs	Ekstra lita tekstrad.
.-size-xxl	Størst tekstrad.
.-size-xxs	Tekstrad i legendestorleik.
.-type-avatar	Ein rund avatarplasshaldar, berre medium storleik.
.-type-image	Ein bildefelt-plasshaldar, berre medium storleik.
.-type-text	Ein tekststang (default).

Delar

Del	Skildring
.shape	Den klipte plasshaldaroverflata tilpassa den valde lastartypen.
.skeleton-row	Ein gjentatt tekstrad-omslag som legg til loddrett avstand.

Pseudo-element

Pseudo-element	Skildring
::before	—

Tilpassa eigenskapar

Eigenskap	Type	Standard	Skildring
--pantoken-skeleton-sweep	<percentage>	0%	—

Animasjonar

Animasjon	Skildring
pantoken-skeleton-sweep	—

Vilkår

Type	Førespurnad	Skildring
media	(prefers-reduced-motion: reduce)	—

Token brukt

Token	Type	Verdi
--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