CSS: skeleton-loader ​

.instui-skeleton-loader — अभी लोड नहीं हुई सामग्री के लिए सजावटी प्लेसहोल्डर।

TIP

JS संवर्धन — यह कंपोनेंट का CSS स्वयं रेंडर और कार्य करता है; इंटरैक्टिव व्यवहार जोड़ने के लिए इसे @pantoken/interactions के साथ जोड़ें। विवरण के लिए modifier table below देखें।

एक्सेसिबिलिटी ​

सजावटी लोडर पर aria-hidden="true" चिन्हित करें. मूल (parent) सामग्री क्षेत्र पर aria-busy रखें, प्रारंभ में खाली स्थिति और उस क्षेत्र के बाहर एक अलर्ट के साथ. पैरेंट के लोड होने की स्थिति की घोषणा करने के लिए interactions पैकेज के से initSkeletonLoading का उपयोग करें. आकृतियों को फोकस नहीं मिलना चाहिए.

उपयोग ​

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एक गोल अवतार प्लेसहोल्डर, केवल मध्यम आकार।
.-type-imageएक छवि प्लेसहोल्डर, केवल मध्यम आकार।
.-type-textएक टेक्स्ट बार (डिफ़ॉल्ट).

पार्ट्स ​

भागविवरण
.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