CSS: skeleton-loader ​

.instui-skeleton-loader — Plas kenbe dekoratif pou kontni ki poko chaje.

TIP

Amelyorasyon JS — CSS konpozan sa a rann li epi fonksyone pou kont li; pè li ak @pantoken/interactions pou ajoute konpòtman entèaktif la. Gade tab modifyè anba a.

Aksè ​

Mete loader dekoratif la aria-hidden="true". Mete aria-busy sou rejyon kontni paran an, ak yon estati inisyalman vid ak yon alèt deyò rejyon sa a. Sèvi ak initSkeletonLoading soti nan the interactions package pou anonse eta chajman paran an. Fòm yo pa dwe resevwa konsantre.

Itilizasyon ​

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

Egzanp ​

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>

Estrikti ​

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;

Modifikatè ​

ModifikatèDeskripsyon
.-size-lgLiy tèks gwo.
.-size-mdLiy tèks mwayen (pa defo).
.-size-smLiy tèks piti.
.-size-xlLiy tèks ekstra-gwo.
.-size-xsLiy tèks ekstra-piti.
.-size-xxlLiy tèks ki pi gwo.
.-size-xxsLiy tèks gwosè lejann.
.-type-avatarYon plas kenbe avatar wonn, sèlman gwosè mwayen.
.-type-imageYon plas kenbe imaj, sèlman gwosè mwayen.
.-type-textYon ba tèks (pa defo).

Pati ​

PatiDeskripsyon
.shapeSifas plas kenbe koupe a dimansyon pou tip loader chwazi a.
.skeleton-rowYon anvlòp liy-tèks repete ki aplike espas vètikal.

Pseudo-eleman ​

Pseudo-elemanDeskripsyon
::before—

Pwopriyete koutim ​

PwopriyeteTipPa defoDeskripsyon
--pantoken-skeleton-sweep<percentage>0%—

Animasyon ​

AnimasyonDeskripsyon
pantoken-skeleton-sweep—

Kondisyon ​

TipRechèchDeskripsyon
media(prefers-reduced-motion: reduce)—

Tokens konsome ​

TokenTipValè
--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