バウンス 3 点ローダー

解説

3 つの小さな丸が時間差で上下に跳ねる、読み込み中を示すローダーです。3 つの span に同じ @keyframes bounce を当て、2 つ目・3 つ目に animation-delay を付けることで波打つように順番に跳ねます。アニメーションは transform:translateY で上下させ、同時に opacity も変化させて沈んでいる玉を少し薄く見せています。画像も JavaScript も使わず CSS だけで動くので軽量で、どこにでも貼り付けやすいのが利点です。

向いている場面

• フォーム送信中やボタン押下後の待機表示
• 非同期でデータを取りに行っている間のプレースホルダー
• チャット UI の「相手が入力中」を表すインジケーター

色を変えるときは span の background を 1 か所直すだけで 3 点すべてに反映されます。跳ねる高さは translateY(-12px)、テンポは animation の 1.2s や各 delay の値で調整できます。注意点として、ローダーは動き続けるため prefers-reduced-motion の利用者向けに動きを止める配慮があると親切です。スクリーンリーダー向けには aria-label="読み込み中" などを付けると状況が伝わります。

使用例・適したシーン

• データ取得中の表示
• 送信ボタンクリック後のフィードバック
• 画像読み込み待ち