加载动画
Skeleton Loader
Content-shaped placeholders that stand in while data loads.
#skeleton#shimmer#placeholder
6 个框架初级
Loading…
The rotating ring, with a sentence attached for anyone who can’t see it.
<!--
The ring is aria-hidden and the wrapper is role="status" with a visually hidden
label. A spinning SVG has nothing an assistive tech can read; the sentence next
to it is the whole accessible interface.
The ring itself is one trick: a full circular border where one side is
transparent, rotated. The gap is what makes rotation visible - a solid ring
spinning looks identical to a solid ring standing still.
-->
<div class="spinner" role="status">
<span class="spinner__ring" aria-hidden="true"></span>
<span class="spinner__label">Loading…</span>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
label | string | 'Loading…' | 加载时朗读的无障碍标签。 |
className | string | - | 合并到根元素上的额外类名。 |
The transparent quarter is what makes rotation visible - a solid ring spinning looks exactly like a solid ring at rest. Under prefers-reduced-motion the ring stops but stays: something must still mark the spot as busy, and the two-tone gap reads perfectly well standing still. Never ship it without the role="status" label; a spinning SVG has nothing an assistive technology can read.