Dots Pulse

CODE

HTML

<div class="demo-stage"><div class="dp-loader"><span></span><span></span><span></span></div></div>

CSS

.demo-stage { display:flex; align-items:center; justify-content:center; padding:3rem; }
.dp-loader { display:flex; gap:15px; }
.dp-loader span { width:20px; height:20px; background:#E91B89; border-radius:50%; animation:dp-bounce 1.2s ease-in-out infinite; }
.dp-loader span:nth-child(2) { animation-delay:.16s; }
.dp-loader span:nth-child(3) { animation-delay:.32s; }
@keyframes dp-bounce { 0%,80%,100% { transform:scale(.4); opacity:.35; } 40% { transform:scale(1); opacity:1; } }
/* REDUCED-MOTION:v1 */
@media (prefers-reduced-motion: reduce) {
  .dp-loader span,
  .dp-loader span:nth-child(2),
  .dp-loader span:nth-child(3) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

AI PROMPT

Claude Code Cursor v0

PROMPT

3ドットの脈打つローダーを作って。20pxの円を3つflexで並べ、scale(.4)+opacity:.35→scale(1)+opacity:1を1.2s ease-in-out infinite。2番目に.16s、3番目に.32sのanimation-delayを付けて波のように順次脈打たせる。チャットの入力中表示に使える。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

ドットパルス（Dots Pulse）とは

3つのドットが順に脈打つローディング表示。チャットの「入力中」やボタン内ローダーに最適。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。

使いどころ

データ取得待ち・画像や動画の読み込み中・ページ遷移中など、待ち時間のつなぎに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。

FAQ

ドットパルス（Dots Pulse）はどんな効果ですか？

3つのドットが順に脈打つローディング表示。チャットの「入力中」やボタン内ローダーに最適。データ取得待ち・画像や動画の読み込み中・ページ遷移中など、待ち時間のつなぎに向く演出です。

Dots PulseはCSSだけで実装できますか？

はい。JavaScriptを使わずCSSの@keyframesアニメーションとtransition／transformだけで実装できます。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

RELATED EFFECTS

ドットパルス（Dots Pulse）とは

使いどころ

CSS実装のポイント

CSSとJavaScriptの違い

FAQ