横スライドプログレスバー（不定）
横スライドプログレスバーは、進捗の割合が読めない処理向けの「インデターミネート（不定）」バーです。外枠 prog-bar に overflow:hidden を掛け、その中で幅 40% の prog-bar__fill を left:-40% から left:100% まで @keyframes で無限に走らせてい…
解説
横スライドプログレスバーは、進捗の割合が読めない処理向けの「インデターミネート（不定）」バーです。外枠 prog-bar に overflow:hidden を掛け、その中で幅 40% の prog-bar__fill を left:-40% から left:100% まで @keyframes で無限に走らせています。フィルには linear-gradient を入れ、cubic-bezier のイージングで滑らかに加減速します。CSS のみで動き、JavaScript は不要です。
確定進捗との使い分け
ダウンロードやサーバー処理など、残り時間を数値化できない待機に向きます。逆に「何 % 完了」が分かる処理では、固定幅で割合を表示するタイプの方が誠実です。色はグラデーションの 2 色を変えるだけでブランドに合わせられます。
- 太さは外枠の
height、長さはwidth - 速さは
animationの秒数で調整 - 処理が終わったら要素を非表示にする制御を別途用意する
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
実際の進捗率に連動させられますか。
このスニペットは進捗が読めない処理向けの不定バーなので連動しません。割合を表示したい場合は、fill の width を JavaScript で実進捗に応じて変える別構成にしてください。
処理が終わったらどう止めますか。
完了時に外枠要素を display:none にするか DOM から外します。CSS は無限ループなので、終了の判断と非表示化はアプリ側のコードで行う必要があります。