CSS: skeleton-loader ​

.instui-skeleton-loader — מציין דקורטיבי עבור תוכן שטרם נטען.

TIP

הרחבת JS — ה-CSS של הרכיב הזה מגדיר את העיצוב ועובד בעצמו; שלבו אותו עם @pantoken/interactions להוספת ההתנהגות האינטראקטיבית. ראו את טבלת המודיפיירים למטה.

נגישות ​

סמן את הטעינה הדקורטיבית aria-hidden="true". Put aria-busy on the parent content region, עם סטטוס ריק בתחילה והתרעה מחוץ לאזור זה. Use initSkeletonLoading from the interactions package to announce the parent's loading state. צורות לא צריכות לקבל פוקוס.

שימוש ​

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שורה של טקסט בגודל בינוני (default).
.-size-smשורה של טקסט קטנה.
.-size-xlשורה של טקסט גדולה במיוחד.
.-size-xsשורה של טקסט קטנה במיוחד.
.-size-xxlהשורה הגדולה ביותר של טקסט.
.-size-xxsשורה של טקסט בגודל מקרא.
.-type-avatarממלא-מקום של אווטאר עגול, רק בגודל בינוני.
.-type-imageממלא-מקום לתמונה, רק בגודל בינוני.
.-type-textסרגל טקסט (default).

חלקים ​

חלקתיאור
.shapeממשטח ממלא-מקום חתוך המותאם לגודל עבור סוג הטעינה הנבחר.
.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