音声ウェーブバー
音声ウェーブバーは、5本の縦棒が上下に伸び縮みして音の波形を表現する純CSSのアニメーションです。各バーは @keyframes で高さを 12px から 46px へ往復させ、2本目以降に animation-delay を .15s ずつ加えることで、波が左から右へ流れるリズムを生んでいます。
解説
音声ウェーブバーは、5本の縦棒が上下に伸び縮みして音の波形を表現する純CSSのアニメーションです。各バーは @keyframes で高さを 12px から 46px へ往復させ、2本目以降に animation-delay を .15s ずつ加えることで、波が左から右へ流れるリズムを生んでいます。JavaScriptは一切使わず、animation: ... infinite でループし続けるため軽量です。
使う場面
- 音楽プレイヤーやポッドキャストの「再生中」を示すインジケーター
- 音声入力・録音中であることを伝えるマイクUI
- AIが応答を生成している間の待機表示
カスタマイズは色とテンポが中心です。.wb i の background を変えれば全バーの色が、animation の 1s を縮めれば波が速くなります。本数を増やす場合は nth-child の遅延も追加してください。動きが苦手な利用者に配慮し、prefers-reduced-motion 指定時はアニメーションを止める分岐を入れると親切です。
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
バーの色を変えるにはどこを編集しますか
CSSの .wb i セレクタにある background の値を変更します。1か所変えるだけで5本すべての色が揃って切り替わります。
波の速さは調整できますか
できます。.wb i の animation で指定している 1s を短くすると速く、長くするとゆっくり波打ちます。各バーの動き出しのズレは animation-delay で決まります。