S-002 Loading simple

How to create a CSS dot wave loader animation CSSでドットウェーブローダーを作る方法

CSS-only dot wave loader using staggered animation-delay for each dot. Pure CSS, lightweight, highly customizable. 各ドットにanimation-delayをずらすだけでウェーブ効果を実現するCSS専用ローダー。軽量でカスタマイズ性が高い。

animation loader css dots wave

ライブデモ Live Demo

1.4s

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

何ができるかWhat it does

A row of dots that bounce in a wave pattern, commonly used as a loading indicator.

波のようにドットが跳ねるパターンで、ローディングインジケーターとして一般的に使用されます。

どこで使うかWhere to use

Loading screens, async data fetching states, button loading states, page transitions, skeleton screen companions.

読み込み画面、非同期データ取得状態、ボタンローディング状態、ページ遷移、スケルトンスクリーンの付随要素。

特徴Key features

Pure CSS animation with no JavaScript dependency. Customizable via CSS custom properties (--wave-duration, --dot-size). Ultra-lightweight implementation under 1KB. Works in all modern browsers.

JavaScriptに依存しない純粋なCSSアニメーション。CSSカスタムプロパティ（--wave-duration, --dot-size）でカスタマイズ可能。1KB未満の超軽量実装。すべてのモダンブラウザで動作。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--wave-duration1.4sFull animation cycle duration
--dot-size12pxWidth and height of each dot
animation-delay0.1s incrementStagger interval between dots
backgroundlinear-gradient(135deg, #5c6ac4, #3b82f6)Dot fill color or gradient
translateY-16pxBounce height in @keyframes

実装コード Implementation Code 

<div class="dot-wave" aria-label="Loading">
  <div class="wave-dot"></div>
  <div class="wave-dot"></div>
  <div class="wave-dot"></div>
  <div class="wave-dot"></div>
  <div class="wave-dot"></div>
</div>
:root {
  --wave-duration: 1.4s;
  --dot-size: 12px;
}

.dot-wave {
  display: flex;
  gap: 8px;
  align-items: center;
}

.wave-dot {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: linear-gradient(135deg, #5c6ac4, #3b82f6);
  animation: dotWave var(--wave-duration) ease-in-out infinite;
}

.wave-dot:nth-child(1) { animation-delay: 0s; }
.wave-dot:nth-child(2) { animation-delay: 0.1s; }
.wave-dot:nth-child(3) { animation-delay: 0.2s; }
.wave-dot:nth-child(4) { animation-delay: 0.3s; }
.wave-dot:nth-child(5) { animation-delay: 0.4s; }

@keyframes dotWave {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-16px); }
}

@media (prefers-reduced-motion: reduce) {
  .wave-dot {
    animation: none;
    opacity: 0.6;
  }
  .wave-dot:nth-child(even) { opacity: 1; }
}
import './DotWaveLoader.css';

export default function DotWaveLoader({ dots = 5, speed = 1.4, className = '' }) {
  return (
    <div
      className={`dot-wave ${className}`}
      style={{ '--wave-duration': `${speed}s` }}
      aria-label="Loading"
      role="status"
    >
      {Array.from({ length: dots }).map((_, i) => (
        <div
          key={i}
          className="wave-dot"
          style={{ animationDelay: `${i * 0.1}s` }}
        />
      ))}
    </div>
  );
}
.dot-wave {
  display: flex;
  gap: 8px;
  align-items: center;
}

.wave-dot {
  width: var(--dot-size, 12px);
  height: var(--dot-size, 12px);
  border-radius: 50%;
  background: linear-gradient(135deg, #5c6ac4, #3b82f6);
  animation: dotWave var(--wave-duration, 1.4s) ease-in-out infinite;
}

@keyframes dotWave {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-16px); }
}

@media (prefers-reduced-motion: reduce) {
  .wave-dot { animation: none; opacity: 0.6; }
  .wave-dot:nth-child(even) { opacity: 1; }
}

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

仕組みHow it works

Each dot element uses the same @keyframes animation (dotWave) that translates the dot vertically using translateY. The wave effect is created by applying incrementally increasing animation-delay values to each dot (0s, 0.1s, 0.2s, 0.3s, 0.4s). The ease-in-out timing function creates smooth acceleration and deceleration at the bounce peaks.

各ドット要素は同じ@keyframesアニメーション（dotWave）を使用し、translateYで垂直方向に移動します。各ドットに順次増加するanimation-delay（0s, 0.1s, 0.2s, 0.3s, 0.4s）を適用することでウェーブ効果を生み出します。ease-in-outのタイミング関数により、バウンスのピークで滑らかな加減速が実現されます。

カスタマイズ方法Customization

Adjust --wave-duration for animation speed (lower = faster). Change --dot-size to scale dots. Replace gradient colors in .wave-dot background to match your brand. Modify the translateY value in @keyframes to change bounce height. Add or remove dot elements to change wave width.

--wave-durationでアニメーション速度を調整（小さいほど速い）。--dot-sizeでドットサイズを変更。.wave-dotのbackgroundグラデーション色をブランドカラーに変更。@keyframesのtranslateY値でバウンス高さを変更。ドット要素の追加・削除でウェーブ幅を変更。

注意点Caveats

Ensure sufficient contrast for dots against the background color. Implement prefers-reduced-motion media query to disable animation for users with motion sensitivity. Consider aria-label='Loading' on the container for screen reader accessibility.

背景色に対するドットのコントラストを十分に確保してください。prefers-reduced-motionメディアクエリを実装し、動きに敏感なユーザーのアニメーションを無効化してください。スクリーンリーダーのアクセシビリティのためにコンテナにaria-label='Loading'を検討してください。

よくある質問 Frequently Asked Questions

How to customize the dot wave loader colors and speed? ドットウェーブローダーの色や速度をカスタマイズするには？

Adjust CSS custom properties: set --wave-duration (e.g., 0.8s for faster, 2s for slower) and --dot-size (e.g., 8px for smaller). Replace the gradient in .wave-dot background with your brand colors. Change the translateY value in @keyframes dotWave to control bounce height.

CSSカスタムプロパティを調整します: --wave-duration（例: 0.8sで速く、2sで遅く）と--dot-size（例: 8pxで小さく）を設定。.wave-dotのbackgroundグラデーションをブランドカラーに変更。@keyframes dotWaveのtranslateY値でバウンス高さを制御します。

How to use the dot wave loader in React? Reactでドットウェーブローダーを使うには？

Import the DotWaveLoader component and its CSS file. Use props to customize: <DotWaveLoader dots={5} speed={1.4} />. The 'dots' prop controls the number of dots, and 'speed' controls the animation duration in seconds.

DotWaveLoaderコンポーネントとそのCSSファイルをインポートします。propsでカスタマイズ: <DotWaveLoader dots={5} speed={1.4} />。'dots' propでドット数を、'speed'でアニメーション時間（秒）を制御します。

What are the performance implications of using CSS dot wave loaders? CSSドットウェーブローダーのパフォーマンスへの影響は？

This loader is highly performant because it uses only CSS transform (translateY) which is GPU-accelerated and runs on the compositor thread. No JavaScript is needed for the animation, resulting in zero main-thread overhead. The entire implementation is under 1KB gzipped.

このローダーはCSS transform（translateY）のみを使用するため、非常に高パフォーマンスです。GPUアクセラレーションされ、コンポジタースレッドで実行されます。アニメーション自体にJavaScriptは不要で、メインスレッドへの負荷はゼロです。実装全体でgzip後1KB未満です。

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

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