CSS: skeleton-loader ​

.instui-skeleton-loader — Espace réservé décoratif pour le contenu qui n'a pas encore été chargé.

TIP

Amélioration JS — Le CSS de ce composant se rend et fonctionne seul ; associez-le à @pantoken/interactions pour ajouter le comportement interactif. Voir le tableau des modificateurs ci‑dessous.

Accessibilité ​

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.

Utilisation ​

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

Exemples ​

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>

Structure ​

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;

Modificateurs ​

ModificateurDescription
.-size-lgGrande ligne de texte.
.-size-mdLigne de texte moyenne (par défaut).
.-size-smPetite ligne de texte.
.-size-xlLigne de texte extra-large.
.-size-xsLigne de texte extra-petite.
.-size-xxlLigne de texte la plus grande.
.-size-xxsLigne de texte de taille légende.
.-type-avatarUn espace réservé d'avatar rond, taille moyenne uniquement.
.-type-imageUn espace réservé pour image, taille moyenne uniquement.
.-type-textUne barre de texte (par défaut).

Parties ​

PartieDescription
.shapeLa surface de l'espace réservé découpée, dimensionnée pour le type de chargeur sélectionné.
.skeleton-rowUn conteneur de lignes de texte répété qui applique un espacement vertical.

Pseudo-éléments ​

Pseudo-élémentDescription
::before—

Propriétés personnalisées ​

PropriétéTypeDéfautDescription
--pantoken-skeleton-sweep<percentage>0%—

Animations ​

AnimationDescription
pantoken-skeleton-sweep—

Conditions ​

TypeRequêteDescription
media(prefers-reduced-motion: reduce)—

Jetons consommés ​

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