Loaders
Spinner Ring
The rotating ring, with a sentence attached for anyone who can’t see it.
#spinner#ring#busy
6 frameworksBeginner
Loading…
Content-shaped placeholders that stand in while data loads.
<div class="skeleton" role="status">
<span class="skeleton__label">Loading…</span>
<div class="skeleton__header" aria-hidden="true">
<div class="skeleton__avatar"></div>
<div class="skeleton__meta">
<div class="skeleton__bar skeleton__bar--title"></div>
<div class="skeleton__bar skeleton__bar--subtitle"></div>
</div>
</div>
<div class="skeleton__body" aria-hidden="true">
<div class="skeleton__bar"></div>
<div class="skeleton__bar"></div>
<div class="skeleton__bar skeleton__bar--short"></div>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
lines | number | 3 | Number of placeholder lines to render. |
showAvatar | boolean | true | Renders a circular avatar placeholder. |
label | string | 'Loading…' | Accessible label announced while loading. |
className | string | - | Additional classes merged onto the root element. |
Match each bar to the shape of the real content it replaces - a skeleton that differs from the loaded layout causes a jarring shift. Honour reduced-motion by slowing or dropping the shimmer.