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 ​

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.

Gebruik ​

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

Voorbeelden ​

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

Structuur ​

text
.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 ​

ModifierBeschrijving
.-size-lgGrote tekstregel.
.-size-mdMiddelgrote tekstregel (standaard).
.-size-smKleine tekstregel.
.-size-xlExtra grote tekstregel.
.-size-xsExtra kleine tekstregel.
.-size-xxlGrootste tekstregel.
.-size-xxsTekstregel in legendaformaat.
.-type-avatarEen ronde avatar-plaatsaanduiding, alleen middelgroot.
.-type-imageEen afbeeldingsplaatsaanduiding, alleen middelgroot.
.-type-textEen tekstbalk (standaard).

Onderdelen ​

OnderdeelBeschrijving
.shapeHet bijgesneden plaatsaanduidingsoppervlak, passend bij het geselecteerde loadertype.
.skeleton-rowEen herhaalde tekstregel-wrapper die verticale tussenruimte toepast.

Pseudo-elementen ​

Pseudo-elementBeschrijving
::before—

Aangepaste eigenschappen ​

EigenschapTypeStandaardBeschrijving
--pantoken-skeleton-sweep<percentage>0%—

Animaties ​

AnimatieBeschrijving
pantoken-skeleton-sweep—

Voorwaarden ​

TypeZoekopdrachtBeschrijving
media(prefers-reduced-motion: reduce)—

Gebruikte tokens ​

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