ドットウェーブローダー

プレビュー

3種類のサイズバリエーションをダーク背景に表示します。

ユースケースと特徴

• ローディング・処理中表示: APIリクエスト時、データフェッチ中などユーザーに待機を伝える用途。

• ドッツの数を自由に変更可能: HTMLの div.dot 要素を追加/削除するだけ。

• ピュアCSS: JavaScript不要。ディスプレイ要素に直接埋め込めます。

• アクセシビリティ: aria-label="Loading" と role="status" を追加することでスクリーンリーダー対応可能。

デザインとUXのポイント

1. 各ドットに0.16秒ずつ遅延: この遅延により波打つような视覚的リズムが生まれます。

2. ease-in-out カーブ: 各ドットがエラスティックな弾みを持つように見える。

3. opacity フェード: 上がるときに不透明度を落とすことで軽く踊るような視覚的効果。

カスタマイズ方法

サイズバリエーション (sm / md / lg)

.dot-sm { width: 8px; height: 8px; }

.dot-md { width: 12px; height: 12px; }

.dot-lg { width: 18px; height: 18px; }

アニメーション速度の変更

/* 速め */

.dot { animation-duration: 0.8s; }



/* 遅め */

.dot { animation-duration: 2s; }

カスタムカラー

.dot { background: #f97316; } /* オレンジ */

実装コード

<div class="dots-row" role="status" aria-label="Loading">

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

</div>



<style>
.dots-row { display: flex; align-items: center; gap: 0.5rem; }

.dot {

width: 12px; height: 12px;

border-radius: 50%;

background: #6366f1;

animation: dots-wave 1.4s ease-in-out infinite;

}

.dot:nth-child(1) { animation-delay: 0s; }

.dot:nth-child(2) { animation-delay: 0.16s; }

.dot:nth-child(3) { animation-delay: 0.32s; }

.dot:nth-child(4) { animation-delay: 0.48s; }

.dot:nth-child(5) { animation-delay: 0.64s; }

@keyframes dots-wave {

0%, 60%, 100% { transform: translateY(0); opacity: 1; }

30% { transform: translateY(-12px); opacity: 0.7; }

}
</style>

ブラウザ対応状況

| ブラウザ | 対応状況 |

|--------|--------|

| Chrome 43+ | ✅ 完全対応 |

| Firefox 16+ | ✅ 完全対応 |

| Safari 9+ | ✅ 完全対応 |

| Edge 79+ | ✅ 完全対応 |