KARAKURIDESIGN SYSTEM

Skeleton

Skeletonは、コンテンツ読み込み中にプレースホルダーを表示するコンポーネントです。 実際のレイアウト構造を事前に提示することで、レイアウトシフトを防ぎ、体感速度を向上させます。

3
Variants
2
Animations
Count
Multi-line
Pure
React

Playground

Preview
text × 3pulse
Variant
Animation
Count
<Skeleton count={3} />

Variants

Text
テキスト行のプレースホルダー。角丸＋行高さ比例サイズ
Default
Circular
アバター・アイコン用の円形プレースホルダー
Avatar
Rectangular
画像・カード領域の矩形プレースホルダー
Media

Features

Animation

2種のアニメーション。pulseは明暗パルス、waveは左→右のシマーエフェクト。

pulse
wave
false (static)

Composition

複数のSkeletonを組み合わせてカード・リストなど複雑なレイアウトを再現できます。

Count

countでテキスト行を自動生成。最終行は短く、各行は自然な幅バリエーションが付きます。

count={3}
count={5} animation="wave"

Loading Wrapper

loading propで条件付き描画。trueでSkeleton表示、falseでchildrenを描画します。

loading=true
JH
loading=false

Custom Sizing

width・height・radius propで精密なサイジングが可能です。

API

Component Structure

Skeleton— Pure React

スタンドアロンコンポーネント。サブコンポーネントはありません。

Props

variant"text"
"text" | "circular" | "rectangular"

形状バリアント（text: 角丸行、circular: 円形、rectangular: 矩形）

animation"pulse"
"pulse" | "wave" | false

アニメーション（pulse: 明暗パルス、wave: シマー、false: 静的）

countundefined
number

テキスト行数（text variant のみ。自動幅バリエーション付き）

loadingundefined
boolean

条件付きローディング（true: Skeleton表示、false: children描画）

widthundefined
string | number

カスタム幅

heightundefined
string | number

カスタム高さ

radiusundefined
string | number

カスタムborder-radius

childrenundefined
ReactNode

loading=false 時に描画するコンテンツ

classNameundefined
string

追加のCSSクラス