加载动画
Spinner Ring
The rotating ring, with a sentence attached for anyone who can’t see it.
#spinner#ring#busy
6 个框架初级
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 | 类型 | 默认值 | 说明 |
|---|---|---|---|
lines | number | 3 | 渲染的占位行数。 |
showAvatar | boolean | true | 渲染圆形头像占位符。 |
label | string | 'Loading…' | 加载时朗读的无障碍标签。 |
className | string | - | 合并到根元素上的额外类名。 |
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.