लोडर
Skeleton Loader
Content-shaped placeholders that stand in while data loads.
#skeleton#shimmer#placeholder
6 फ्रेमवर्कशुरुआती
Loading…
प्रीमियम एक्सेस लेंA media card’s placeholder - cover, title, body, byline.
<!--
A media card's skeleton, not a generic one: cover block, title, two body lines,
footer row. The shapes are copied from the loaded card on purpose - a skeleton
whose proportions don't match the real thing produces a visible jolt at swap
time, which is worse than showing nothing at all.
The cover block reserves its aspect ratio (16/9) rather than a fixed height, so
the swap is stable at every width.
One role="status" for the card. The bars are aria-hidden - a screen reader
reading out nine anonymous placeholders is noise, not progress.
-->
<div class="sk-card" role="status">
<span class="sk-card__label">Loading card…</span>
<div class="sk-card__cover" aria-hidden="true"></div>
<div class="sk-card__body" aria-hidden="true">
<div class="sk-card__bar sk-card__bar--title"></div>
<div class="sk-card__bar"></div>
<div class="sk-card__bar sk-card__bar--short"></div>
<div class="sk-card__footer">
<div class="sk-card__avatar"></div>
<div class="sk-card__bar sk-card__bar--name"></div>
</div>
</div>
</div>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
label | string | 'Loading card…' | लोड होते समय पढ़ा जाने वाला एक्सेसिबल लेबल। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
Copy the proportions of the card it replaces, not a generic set of bars: a skeleton whose shape differs from the loaded layout produces a visible jolt at swap time, which is worse than showing nothing. The cover reserves an aspect ratio rather than a fixed height, so the swap stays stable at every width. One role="status" for the card and aria-hidden on every bar - a screen reader reading out nine anonymous placeholders is noise, not progress.