ライブデモ Live Demo

リストレイアウトをスケルトン行で模擬し、グラデーション背景をアニメーションしてシマーを作成します。スライダーでシマーの移動速度を調整できます。

Mimic the list layout with skeleton rows and animate a gradient background to create the shimmer. Use the slider to adjust how fast the shimmer travels.

1.8s

AI向け説明 AI Description

各スケルトンバーはグラデーションの背景位置をシンプルにアニメーションします。`prefers-reduced-motion`下ではシマーを無効にし、微細な不透明度変化に切り替えることができます。

Each skeleton bar simply animates the background position of a gradient. Under `prefers-reduced-motion` you can disable the shimmer and swap to subtle opacity transitions.

調整可能パラメータ Adjustable Parameters

実装 Implementation

HTML + CSS + JS

<ul class="skeleton-list">
  <li class="skeleton-row"></li>
  <li class="skeleton-row"></li>
  <li class="skeleton-row"></li>
</ul>

<style>
:root {
  --shimmer-duration: 1.8s;
}
.skeleton-row {
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2), rgba(0,0,0,0.1));
  background-size: 200% 100%;
  animation: shimmer var(--shimmer-duration) ease infinite;
}
@keyframes shimmer {
  0% {
    background-position: -120%;
  }
  100% {
    background-position: 120%;
  }
}
</style>

<script>
const slider = document.querySelector("[data-control-speed]");
const list = document.querySelector(".skeleton-list");
slider.addEventListener("input", (event) => {
  list.style.setProperty("--shimmer-duration", `${event.target.value}s`);
});
</script>

React (JSX + CSS)

// 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%;
  }
}

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

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

ノート & バリエーション Notes & Variations

アバター形状やテーブル行に拡張するには、サイズと border-radius を変更してください。AIにバリエーションのスケルトンプレースホルダーを依頼する際にこのページを参照してください。

Extend this to avatar shapes or table rows by changing dimensions and border radius. Use this page when asking AI for variant skeleton placeholders.