Skeleton

コンテンツの読み込み中に表示されるプレースホルダーコンポーネントです。ユーザーにコンテンツの形状を予告し、体感速度を向上させます。

Basic

jui-skeleton の最も基本的な使用例です。

関連コンポーネント

• Card — カードコンポーネントのローディング状態表示に
• Table — テーブルのローディング状態表示に
• Avatar — アバターのローディング状態表示に

ブラウザ対応

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
CSS Animation	パルスフェードアニメーション	43+	16+	9+	Baseline 2017
prefers-reduced-motion	モーション軽減のサポート	74+	63+	10.1+	Baseline 2020

💡 いずれの機能も主要ブラウザで広く対応済みです。

Baseline 情報

機能	Baseline 達成	Widely Available 予定
CSS Animation	2017年	2020年前半 ✅
prefers-reduced-motion	2020年	2022年後半 ✅

アクセシビリティ

• WAI-ARIA:
  • ローディング中であることを示す支援技術向けのセマンティクスとして、親要素などに aria-busy="true" を指定し、ローディング完了後に aria-busy="false" に切り替える実装と組み合わせることを推奨します。
  • スケルトン要素自体はインタラクティブではないため、スクリーンリーダーによる意味的なフォーカスや読み上げから除外するよう調整されます。
• モーションの軽減:
  • OS 設定でアニメーションの軽減が有効なユーザー（prefers-reduced-motion: reduce）に対しては、パルス（点滅）アニメーションが自動的に停止し、静的なグレーボックスとして表示されます。

CSS カスタムプロパティ

プロパティ名	説明	既定値
--jui-skeleton-circle-size	円形バリアント（circle）指定時の直径サイズ	40px
--jui-skeleton-pulse-duration	パルスアニメーションの1周期にかかる時間	1.8s

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
animated	animated	アニメーション	boolean	true
height	height	高さ（CSS値）	string	''
lastLineWidth	last-line-width	最後の行の幅（複数行モード時）	string	'75%'
lines	lines	テキスト行数（variant=text 時のみ）	number	1
variant	variant	形状	"circle" | "rect" | "text"	'text'
width	width	幅（CSS値）	string	''

シャドウパーツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Part	Description
"skeleton"	ルート要素

---

Built with StencilJS