kaze風

Skeleton

コンテンツの読み込み中に表示するスケルトンプレースホルダーコンポーネント。

GitHub でソースを見る

プレビュー

テキスト

円形

カード風レイアウト

使いどころ

使う場面

データ取得中に、あとから出る内容と同じ大きさ・位置の枠を先に見せる
width / height で寸法を合わせ、アバターなどの丸いものは circle にする
表やカードの一覧など、レイアウトが決まっている読み込み

使わない場面

ボタン操作の結果待ち。Button の loading や Spinner で示す
取得した結果が 0 件のとき。EmptyState を使う
終わりの見えない処理の進み具合の説明。Progress を使う
操作できない理由や失敗の説明。Alert を使う

使い方

<Skeleton width="80%" height="1em" />
<Skeleton circle width={48} height={48} />
<Skeleton width="100%" height={120} />

プロパティ

名前	型	デフォルト	説明
`width`	`string \| number`	なし	幅（px または %）
`height`	`string \| number`	なし	高さ（px）
`circle`	`boolean`	`false`	円形にする（border-radius: 50%）

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

アクセシビリティ

aria-hidden="true" が付くため、支援技術には何も伝わらない
読み込み中であることは親要素に aria-busy="true" を付けるか、visually hidden の「読み込み中」を添えて伝える
読み込みが終わったら Skeleton を外し、内容に置き換える

関連するコンポーネント