UI Component Lab English

← コンポーネント一覧

フィードバック

Skeleton スケルトン

読み込み中の内容のレイアウトを、灰色の図形で先に見せる仮の表示。

見分けるポイント

画像や文字が入る場所に薄い灰色の丸や棒が並び、光が横に流れるような動きが付くことが多い。

挙動

  • 読み込みが終わると、本物の内容に置き換わる。
  • レイアウトがすぐに出るので待ち時間が短く感じられ、内容が届いたときに画面がずれにくい。
  • 灰色の図形は支援技術から隠し、読み込み中の領域には aria-busy を付ける。

キーボード操作

キー動作
—なし。デモの再読み込みボタンは Enter / Space で押せる。
  • スピナー: スケルトンは内容のレイアウトを先に見せ、スピナーは読み込み中であることだけを1つの図形で示す。

出典