S-005 Loading medium

How to create a skeleton card スケルトンカードの作り方

Card-style skeleton loading placeholder. Displays loading state with shimmer animation. カード形式のスケルトンローディング。シマーアニメーションで読み込み状態を表現します。

skeleton card loading shimmer

ライブデモ Live Demo

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Card-style skeleton loading placeholder. Displays loading state with shimmer animation.

カード形式のスケルトンローディング。シマーアニメーションで読み込み状態を表現します。

どこで使うかWhere to use

loading screen, async UI state, page transition, data fetching indicator

商品カードローディング、ブログ記事カード、プロフィールカード、検索結果

特徴Key features

Full card skeleton placeholder with shimmer effect, mimicking an image, title, and body text layout. Matches the visual footprint of the real card. Smooth transition to real content. Built with CSS only for the shimmer.

シマーエフェクト付きのフルカードスケルトンプレースホルダー。画像・タイトル・本文テキストレイアウトを模倣。実際のカードの視覚的フットプリントと一致。実コンテンツへのスムーズなトランジション。シマーはCSSオンリー。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--shimmer-duration—shimmer animation speed
card layout—card layout and element arrangement
element sizes—size and width of each element

実装コード Implementation Code 

// react/S-005.jsx
import "./S-005.css";

export default function SkeletonCard() {
  return (
    <div className="skeleton-card">
      <div className="skeleton-card__image"></div>
      <div className="skeleton-card__title"></div>
      <div className="skeleton-card__text"></div>
      <div className="skeleton-card__text"></div>
    </div>
  );
}
/* react/S-005.css */
.skeleton-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #dfe3f6;
}

.skeleton-card__image {
  width: 100%;
  height: 200px;
  background: #f0f2f8;
  border-radius: 8px;
  margin-bottom: 16px;
  animation: shimmer 1.5s infinite;
}

.skeleton-card__title {
  width: 60%;
  height: 24px;
  background: #f0f2f8;
  border-radius: 4px;
  margin-bottom: 12px;
  animation: shimmer 1.5s infinite;
}

.skeleton-card__text {
  width: 100%;
  height: 16px;
  background: #f0f2f8;
  border-radius: 4px;
  margin-bottom: 8px;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-card__image,
.skeleton-card__title,
.skeleton-card__text {
  background-image: linear-gradient(
    90deg,
    #f0f2f8,
    rgba(255, 255, 255, 0.5),
    #f0f2f8
  );
  background-size: 200% 100%;
}
import "./S-005.css";

export default function SkeletonCard() {
  return (
    <div className="skeleton-card">
      <div className="skeleton-card__image"></div>
      <div className="skeleton-card__title"></div>
      <div className="skeleton-card__text"></div>
      <div className="skeleton-card__text"></div>
    </div>
  );
}
.skeleton-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #dfe3f6;
}

.skeleton-card__image {
  width: 100%;
  height: 200px;
  background: #f0f2f8;
  border-radius: 8px;
  margin-bottom: 16px;
  animation: shimmer 1.5s infinite;
}

.skeleton-card__title {
  width: 60%;
  height: 24px;
  background: #f0f2f8;
  border-radius: 4px;
  margin-bottom: 12px;
  animation: shimmer 1.5s infinite;
}

.skeleton-card__text {
  width: 100%;
  height: 16px;
  background: #f0f2f8;
  border-radius: 4px;
  margin-bottom: 8px;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-card__image,
.skeleton-card__title,
.skeleton-card__text {
  background-image: linear-gradient(
    90deg,
    #f0f2f8,
    rgba(255, 255, 255, 0.5),
    #f0f2f8
  );
  background-size: 200% 100%;
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

The skeleton card mirrors the dimensions and layout of the real card using the same CSS classes but with placeholder divs replacing images and text. Each placeholder has the shimmer gradient background animation. When data arrives, a JavaScript class swap or React re-render replaces the skeleton with the real card.

スケルトンカードは同じCSSクラスを使用しながら画像とテキストをプレースホルダーdivに置き換えて実際のカードの寸法とレイアウトを鏡写しにします。各プレースホルダーはシマーグラデーションbackgroundアニメーションを持ちます。データが届くとJavaScriptクラス交換またはReactの再レンダリングがスケルトンを実際のカードに置き換えます。

カスタマイズ方法Customization

Match skeleton dimensions exactly to the loaded card to avoid layout shift (CLS). Add multiple skeleton cards to fill the grid before data loads. Use a wave animation variant (sequential shimmer across all cards) instead of individual shimmer.

CLS（レイアウトシフト）を避けるためスケルトンの寸法をロードされたカードに正確に合わせてください。データロード前にグリッドを埋めるために複数のスケルトンカードを追加。個別のシマーの代わりにウェーブアニメーションバリアント（全カードへの順次シマー）を使用。

注意点Caveats

Skeleton cards should be aria-hidden="true" so screen readers skip them and do not read out meaningless placeholder content. Use aria-busy="true" on the container and set it to false when real content loads.

スケルトンカードはaria-hidden="true"にして意味のないプレースホルダーコンテンツをスクリーンリーダーがスキップするようにしてください。コンテナにaria-busy="true"を使用し、実コンテンツロード時にfalseに設定してください。

よくある質問 Frequently Asked Questions

How to customize the skeleton card? Skeleton Cardをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the skeleton card in React? ReactでSkeleton Cardを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of skeleton card? Skeleton Cardのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.