CSS: skeleton-loader

.instui-skeleton-loader — Decoratieve tijdelijke aanduiding voor inhoud die nog niet is geladen.

TIP

JS-verbetering — De CSS van deze component rendert en werkt op zichzelf; combineer met @pantoken/interactions om het interactieve gedrag toe te voegen. Zie de modifier table below.

Toegankelijkheid

Markeer de decoratieve loader aria-hidden="true". Plaats aria-busy op het bovenliggende contentgebied, met een aanvankelijk lege status en een alert buiten dat gebied. Gebruik initSkeletonLoading van het interactions package om de laadstatus van de ouder aan te kondigen. Vormen mogen geen focus krijgen.

Gebruik

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

Structuur

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

Modifiers

Modifier	Beschrijving
.-size-lg	Grote tekstregel.
.-size-md	Middelgrote tekstregel (standaard).
.-size-sm	Kleine tekstregel.
.-size-xl	Extra grote tekstregel.
.-size-xs	Extra kleine tekstregel.
.-size-xxl	Grootste tekstregel.
.-size-xxs	Tekstregel in legendaformaat.
.-type-avatar	Een ronde avatar-plaatsaanduiding, alleen middelgroot.
.-type-image	Een afbeeldingsplaatsaanduiding, alleen middelgroot.
.-type-text	Een tekstbalk (standaard).

Onderdelen

Onderdeel	Beschrijving
.shape	Het bijgesneden plaatsaanduidingsoppervlak, passend bij het geselecteerde loadertype.
.skeleton-row	Een herhaalde tekstregel-wrapper die verticale tussenruimte toepast.

Pseudo-elementen

Pseudo-element	Beschrijving
::before	—

Aangepaste eigenschappen

Eigenschap	Type	Standaard	Beschrijving
--pantoken-skeleton-sweep	<percentage>	0%	—

Animaties

Animatie	Beschrijving
pantoken-skeleton-sweep	—

Voorwaarden

Type	Zoekopdracht	Beschrijving
media	(prefers-reduced-motion: reduce)	—

Gebruikte tokens

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