メインコンテンツへスキップ
Frutjam logo Frutjam
v2.2.5
Theme

スケルトンコンポーネント

最終更新日:

プレースホルダー UI 用の CSS のみの Tailwind CSS スケルトン ローダー。パルスアニメーションを備えた円、長方形、およびテキスト線の形状。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

スケルトン コンポーネントは、コンテンツの読み込み中にプレースホルダー レイアウトを表示し、視覚的なフィードバックを提供し、知覚されるパフォーマンスを向上させます。セマンティック HTML とパルス アニメーションで構築されたスケルトン画面は、レイアウトの変更を防ぎ、ユーザーの期待を設定します。 Frutjam スケルトン システムは、複数の形状とサイズをサポートしており、コンテンツ プレビュー、プログレッシブ読み込み、正常な劣化に最適です。

CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

クラス タイプ 説明
skeletonベースパルス状のプレースホルダー ブロック
skeleton-circleスタイル円形のスケルトン形状
skeleton-textスタイル表示されるテキストに適用されるきらめきアニメーション

基本的な使い方

<div class="skeleton h-32 w-32"></div>

<div className="skeleton h-32 w-32"></div>

スケルトンの形状

html 
1
2
3
4
5
6
7
<div class="skeleton skeleton-circle h-12 w-12"></div>

<div class="skeleton h-12 w-12"></div>

<div class="skeleton h-12 w-12"></div>

<div class="skeleton h-4 w-12"></div>

スケルトンカード

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="card card-outline w-96">
  <figure class="skeleton h-64"></figure>
  <div class="card-content">
    <h2 class="skeleton h-4 w-28"></h2>
    <p class="skeleton h-3 w-full"></p>
    <p class="skeleton h-3 w-full"></p>
    <div class="card-actions justify-end">
      <div class="skeleton h-8 w-24"></div>
    </div>
  </div>
</div>

スケルトンリスト

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="space-y-2">
  <div class="flex items-center gap-3">
    <div class="skeleton h-10 w-10 rounded-full shrink-0"></div>
    <div class="flex flex-col gap-2 flex-1">
      <div class="skeleton h-3 w-20"></div>
      <div class="skeleton h-3 w-full"></div>
    </div>
  </div>
  <div class="flex items-center gap-3">
    <div class="skeleton h-10 w-10 rounded-full shrink-0"></div>
    <div class="flex flex-col gap-2 flex-1">
      <div class="skeleton h-3 w-20"></div>
      <div class="skeleton h-3 w-full"></div>
    </div>
  </div>
</div>

スケルトンアバター

html 
1
2
3
<div class="avatar">
  <div class="skeleton skeleton-circle h-12 w-12"></div>
</div>

スケルトンプロフィールカード

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="flex w-52 flex-col gap-4">
  <div class="flex items-center gap-4">
    <div class="skeleton h-16 w-16 shrink-0 rounded-full"></div>
    <div class="flex flex-col gap-4">
      <div class="skeleton h-4 w-20"></div>
      <div class="skeleton h-4 w-28"></div>
    </div>
  </div>
  <div class="skeleton h-32 w-full"></div>
</div>

スケルトン記事

html 
1
2
3
4
5
6
<div class="flex w-52 flex-col gap-4">
  <div class="skeleton h-32 w-full"></div>
  <div class="skeleton h-4 w-28"></div>
  <div class="skeleton h-4 w-full"></div>
  <div class="skeleton h-4 w-full"></div>
</div>

スケルトンテキスト

AI is thinking...
html 
<span class="skeleton skeleton-text">AI is thinking...</span>

Claude コード、Cursor、または別の AI エディターを使用していますか?

Cherry MCP は、AI エディタに正確な スケルトン クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。

Cherry MCP を試してみる