CSS: skeleton-loader ​

.instui-skeleton-loader — Զարդարիչ պահակ՝ այն բովանդակության համար, որը դեռ չի բեռնվել։

TIP

JS բարելավում — Այս կոմպոնենտի CSS–ը ինքնուրույն ներկառում և գործում է; զուգակցել այն @pantoken/interactions–ի հետ ինտերակտիվ վարք ավելացնելու համար։ Լրացուցիչ դիտեք մոդիֆիկատորների աղյուսակը.

Մուտքականություն ​

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.

Օգտագործում ​

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

Օրինակներ ​

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>

Կառուցվածք ​

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;

Մոդիֆիկատորներ ​

ՄոդիֆիկատորՆկարագիր
.-size-lgՄեծ տեքստային տող։
.-size-mdՄիջին տեքստային տող (ստանդարտ).
.-size-smՓոքր տեքստային տող։
.-size-xlՇատ մեծ տեքստային տող։
.-size-xsՇատ փոքր տեքստային տող։
.-size-xxlԱմենամեծ տեքստային տող։
.-size-xxsՏեքստային տող՝ լեգենդի չափի։
.-type-avatarՇրջանաձև avatar-ի պահեստամաս, միայն միջին չափսով։
.-type-imageՊատկերի պահեստամաս, միայն միջին չափսով։
.-type-textՏեքստային գոտի (նախնական).

Մասեր ​

ՄասՆկարագիր
.shapeԿլիպացված պահեստային մակերես, չափված ընտրված loader տեսակի համար։
.skeleton-rowԿրկնվող տեքստային տողերի պարուրիչ, որը կիրառում է ուղղահայաց բացատներ։

Պսևդո-էլեմենտներ ​

Պսևդո-էլեմենտՆկարագիր
::before—

Անհատական հատկություններ ​

ԱռանձնահատկությունՏիպԸնթացիկՆկարագիր
--pantoken-skeleton-sweep<percentage>0%—

Անիմացիաներ ​

ԱնիմացիաՆկարագիր
pantoken-skeleton-sweep—

Պայմաններ ​

ՏիպՀարցումՆկարագիր
media(prefers-reduced-motion: reduce)—

Ցուցիչներ սպառված ​

TokenՏիպԱրժեք
--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