波紋（リップル）ウェーブローダー
波紋ウェーブローダーは、中央から円が次々と広がって消える「水面に石を落としたような」演出のローダーです。実装は CSS だけで、JavaScript は使いません。2 枚の span を border-radius:50% で円にし、 @keyframes で transform:scale() と opacity…
解説
波紋ウェーブローダーは、中央から円が次々と広がって消える「水面に石を落としたような」演出のローダーです。実装は CSS だけで、JavaScript は使いません。2 枚の span を border-radius:50% で円にし、@keyframes で transform:scale() と opacity を同時に動かして拡大しながらフェードアウトさせています。2 枚目に animation-delay を 1 秒つけているので、波紋が途切れず連続して広がって見えます。
こんな場面で使える
- Wi-Fi 接続中や通信待ちの「接続しています」表示
- ライブ配信・リアルタイム更新の進行サイン
- 位置情報や周辺検索の待機画面
色は border の #667eea を変えるだけでブランドカラーに合わせられます。波紋を速くしたいときは animation の 2s を短く、本数を増やしたいときは span を足して animation-delay をずらします。動きが連続するため、めまいに配慮して prefers-reduced-motion ではアニメを止める指定を併記すると安心です。
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
JavaScript は必要ですか？
不要です。HTML と CSS のアニメーションだけで動くため、そのまま貼り付ければ使えます。
波紋の色を変えたいです。
CSS の border に指定された #667eea を好きな色に変えるだけです。複数の span に同じ色が使われているので、まとめて置き換えてください。