ローダー
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.