3 ドット 波打ちローダー
3 つの小さな丸が左から順に上下へ弾む、チャットの「入力中…」を思わせる軽量ローダーです。実装は CSS のみで、3 つの span に同じ @keyframes を当て、2 番目に .2s 、3 番目に .4s の animation-delay を足すだけ。
解説
3 つの小さな丸が左から順に上下へ弾む、チャットの「入力中…」を思わせる軽量ローダーです。実装は CSS のみで、3 つの span に同じ @keyframes を当て、2 番目に .2s、3 番目に .4s の animation-delay を足すだけ。少しずつ開始をずらすことで、波が伝わるように順番に跳ねて見えます。各ドットは弾む頂点で translateY(-14px) しつつ不透明度も上がり、底では薄く沈むのでリズムにメリハリが出ます。要素は 3 個だけで JavaScript も不要です。
使う場面
- メッセージアプリの相手が返信中であることを示す演出
- 送信・保存などの短い待ち時間のフィードバック
- AI チャットや問い合わせフォームの応答待ち表示
色はドットの background 一箇所、跳ねる高さは translateY の値、テンポは animation の秒数で簡単に調整できます。ドットの間隔は親の gap で決まります。注意点として、待機状態であることが目で見えても支援技術には伝わらないため、囲うコンテナに role="status" や aria-label（例：読み込み中）を添えると親切です。常時動くアニメーションなので、prefers-reduced-motion 環境では動きを控えめにする分岐を用意しておくと配慮が行き届きます。
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
ドットの色や数は変えられますか？
色は span の background の値を変えるだけで切り替わります。数を増やしたい場合は span を追加し、それぞれに animation-delay を少しずつ加えてください。順番に遅延をずらすことで、丸が増えても波打つリズムが保たれます。
跳ねるテンポを速くしたいです。
各ドットに指定しているアニメーションの秒数（サンプルでは 1.2 秒）を短くすると全体が速くなります。あわせて 2 番目と 3 番目の遅延も比率を保って小さくすると、テンポを上げてもきれいな波の連なりを維持できます。