イコライザー風 5 本バーローダー
イコライザー風 5 本バーローダーは、音楽プレイヤーのようにバーが上下するアニメーションです。5 本の span を flex で横に並べ、 align-items:flex-end で下端をそろえています。
解説
イコライザー風 5 本バーローダーは、音楽プレイヤーのようにバーが上下するアニメーションです。5 本の span を flex で横に並べ、align-items:flex-end で下端をそろえています。各バーには初期の高さを与えたうえで、transform:scaleY を 0.4 から 1.2 へ往復させる @keyframes を掛け、さらに animation-delay を本ごとにずらすことで波打つように見せています。CSS のみで JavaScript は不要です。
向く場面とカスタマイズ
音声・動画の再生中表示、ポッドキャストや DJ・音楽系サイト、録音中インジケータなどに合います。バーの本数は span を増減し、nth-child の遅延と初期高さを足してください。色はネオンの 0ff を変えるだけでテーマに合わせられます。
- 動きの大きさは
scaleYの上限値 - 間隔は
gap、太さはwidth - 無限アニメなので
prefers-reduced-motion配慮を推奨
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
バーの本数を増やせますか。
増やせます。span を追加し、その本にも nth-child で animation-delay と初期 height を指定します。遅延を等間隔にずらすと自然な波になります。
本当に音に反応していますか。
していません。これは見た目だけの装飾アニメーションです。実際の音量に連動させたい場合は Web Audio API で解析した値を各バーの高さに反映する実装が別途必要です。