S-001 Loading simple

How to create a skeleton pulse rows スケルトンパルス行の作り方

Shimmering skeleton rows for list-loading states with adjustable speed. リスト読み込み時の骨組み表示をシマーアニメーションで表現するパターン。

loading skeleton shimmer

ライブデモ Live Demo

シマー速度 Shimmer speed 1.8s

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

何ができるかWhat it does

Shimmering skeleton rows for list-loading states with adjustable speed.

リスト読み込み時の骨組み表示をシマーアニメーションで表現するパターン。

どこで使うかWhere to use

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

コンテンツローディング状態、ニュースフィード、リストビュー、記事ページ

特徴Key features

CSS shimmer animation skeleton rows mimicking text/content layout. Communicates loading state without a spinner. Configurable row count and widths. GPU-accelerated gradient sweep via background-position animation.

テキスト/コンテンツレイアウトを模したCSSシマーアニメーションスケルトン行。スピナーなしでローディング状態を伝達。行数と幅を設定可能。background-positionアニメーションによるGPUアクセラレーションのグラデーションスウィープ。

調整可能パラメータ Adjustable Parameters

Parameter	Default	Description

実装コード Implementation Code

// react/S-001.jsx
import { useState } from "react";
import "./S-001.css";

export default function SkeletonPulseRows({ rows = 5 }) {
  const [speed, setSpeed] = useState(1.8);

  return (
    <div className="skeleton-list" style={{ ["--shimmer-duration"]: `${speed}s` }}>
      {Array.from({ length: rows }).map((_, index) => (
        <div className="skeleton-row" key={index} />
      ))}
      <label className="skeleton-speed">
        Speed
        <input
          type="range"
          min="1"
          max="3"
          step="0.1"
          value={speed}
          onChange={(event) => setSpeed(Number(event.target.value))}
        />
      </label>
    </div>
  );
}

/* react/S-001.css */
:root {
  --shimmer-duration: 1.8s;
}
.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.skeleton-row {
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
  background-size: 200% 100%;
  animation: shimmer var(--shimmer-duration) ease-in-out infinite;
}
.skeleton-row:nth-child(2n) {
  width: 80%;
}
.skeleton-speed {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}
@keyframes shimmer {
  0% {
    background-position: -120%;
  }
  100% {
    background-position: 120%;
  }
}

import { useState } from "react";
import "./S-001.css";

export default function SkeletonPulseRows({ rows = 5 }) {
  const [speed, setSpeed] = useState(1.8);

  return (
    <div className="skeleton-list" style={{ "--shimmer-duration": `${speed}s` }}>
      {Array.from({ length: rows }).map((_, index) => (
        <div className="skeleton-row" key={index} />
      ))}
      <label className="skeleton-speed">
        Speed
        <input
          type="range"
          min="1"
          max="3"
          step="0.1"
          value={speed}
          onChange={(event) => setSpeed(Number(event.target.value))}
        />
        <output>{speed.toFixed(1)}s</output>
      </label>
    </div>
  );
}

:root {
  --shimmer-duration: 1.8s;
}

.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-row {
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
  background-size: 200% 100%;
  animation: shimmer var(--shimmer-duration) ease-in-out infinite;
}

.skeleton-row:nth-child(2n) {
  width: 80%;
}

.skeleton-speed {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

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

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

仕組みHow it works

Rows are div elements with a gradient background (dark → light → dark) that animates its background-position from -200% to 200% in a loop, creating the shimmer sweep. Each row has a fixed height and variable width (100%, 80%, 60%) to imitate text line lengths. The component is replaced by real content once data loads.

行はグラデーション背景（暗→明→暗）を持つdiv要素で、background-positionを-200%から200%にループアニメーションしシマースウィープを作成。各行はテキスト行長を模倣するために固定高さと可変幅（100%、80%、60%）を持ちます。データロード後にコンポーネントは実際のコンテンツに置き換えられます。

カスタマイズ方法Customization

Adjust shimmer speed by changing animation-duration. Match the skeleton background color to your surface color. Add a circular skeleton for avatar placeholders alongside the rows. Use different row widths to mimic specific content shapes.

animation-durationを変更してシマースピードを調整。スケルトン背景色をサーフェスカラーに合わせる。行と一緒にアバタープレースホルダーの円形スケルトンを追加。特定のコンテンツ形状を模倣するために異なる行幅を使用。

注意点Caveats

Add role="status" and aria-label="Loading content" to the skeleton wrapper so screen readers announce the loading state. Remove the skeleton and move focus to the first loaded item when content appears.

スクリーンリーダーがローディング状態をアナウンスするためスケルトンラッパーにrole="status"とaria-label="コンテンツを読み込み中"を追加してください。コンテンツが表示されたらスケルトンを削除して最初のロードされたアイテムにフォーカスを移動してください。

よくある質問 Frequently Asked Questions

How to customize the skeleton pulse rows? Skeleton Pulse Rowsをカスタマイズするには？

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 pulse rows in React? ReactでSkeleton Pulse Rowsを使うには？

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 pulse rows? Skeleton Pulse Rowsのパフォーマンスへの影響は？

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.

以下のUIパターンを実装してください。

- パターンID: S-001
- パターン名: スケルトンパルス行
- 参照URL: https://devsnips.dev/snippets/skeleton-pulse-rows/
- フレームワーク: [React / Vue / Vanilla JS / その他]
- 要件:
  - デザインは参照URLのデモに準拠
  - レスポンシブ対応（モバイル/デスクトップ）
  - アクセシビリティ考慮
  - [ここに追加の要件を記述]

Please implement the following UI pattern.

- Pattern ID: S-001
- Pattern Name: Skeleton Pulse Rows
- Reference URL: https://devsnips.dev/snippets/skeleton-pulse-rows/
- Framework: [React / Vue / Vanilla JS / Other]
- Requirements:
  - Follow the design from the reference URL demo
  - Responsive (mobile / desktop)
  - Accessibility (keyboard navigation, screen reader)
  - [Add your requirements here]