S-002 Dot Wave Loader | Vibe UI Pattern Library

ライブデモ Live Demo

各ドットに異なるアニメーション遅延を設定することで波のような効果を作成します。CSSカスタムプロパティで速度とサイズを調整できます。

Create a wave-like effect by setting different animation delays for each dot. Speed and size can be adjusted via CSS custom properties.

波の速度 Wave Speed 1.4s

AI向け説明 AI Description

`S-002` は各ドットに異なる `animation-delay` を設定してウェーブ効果を作成するCSS専用ローダーです。`@keyframes` で `translateY` を使い波の動きを実現し、`--wave-duration` と `--dot-size` でカスタマイズできます。

`S-002` is a CSS-only loader that creates a wave effect by setting staggered `animation-delay` on each dot. The `@keyframes` uses `translateY` for wave motion, customizable via `--wave-duration` and `--dot-size`.

調整可能パラメータ Adjustable Parameters

--wave-duration — アニメーション速度を制御 control animation speed
--dot-size — ドットのサイズを調整 adjust dot size
animation-delay — 各ドットの遅延時間を変更 modify delay timing for each dot
dot colors — グラデーション色をブランドカラーに replace gradient with brand colors

実装 Implementation

HTML + CSS

<div class="dot-wave">
  <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>

<style>
: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); }
}
</style>

React (JSX + CSS)

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

export default function DotWaveLoader({ dots = 5, speed = 1.4 }) {
  return (
    <div className="dot-wave" style={{ ["--wave-duration"]: `${speed}s` }}>
      {Array.from({ length: dots }).map((_, i) => (
        <div
          key={i}
          className="wave-dot"
          style={{ animationDelay: `${i * 0.1}s` }}
        />
      ))}
    </div>
  );
}

/* react/S-002.css */
.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); }
}

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

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

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

- パターンID: S-002
- パターン名: ドットウェーブローダー
- 参照URL: https://devsnips.dev/animations/S-002.html
- フレームワーク: [React / Vue / Vanilla JS / その他]
- 要件:
  - デザインは参照URLのデモに準拠
  - レスポンシブ対応（モバイル/デスクトップ）
  - アクセシビリティ考慮（キーボード操作、スクリーンリーダー）
  - [ここに追加の要件を記述]

Please implement the following UI pattern.

- Pattern ID: S-002
- Pattern Name: Dot Wave Loader
- Reference URL: https://devsnips.dev/animations/S-002.html
- 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]

注意とバリエーション Notes & Variations

ドット数を増減させたり、縦方向の波パターンを作成したり、色の変化を追加してより複雑なローディング体験を作成できます。

Increase or decrease the number of dots, create vertical wave patterns, or add color transitions for more complex loading experiences.