縞模様プログレスバー
斜めの縞模様が横へ流れ続けることで「処理中」を示す、水平バー型のローダーです。土台のトラックの中に塗りバーを置き、その塗りに repeating-linear-gradient で 45 度の縞を作っています。
解説
斜めの縞模様が横へ流れ続けることで「処理中」を示す、水平バー型のローダーです。土台のトラックの中に塗りバーを置き、その塗りに repeating-linear-gradient で 45 度の縞を作っています。アニメーションは縞の background-position を 1 周期ぶん（background-size と同じ 28px）動かすだけで、模様が滑らかにループします。塗りバーの幅は 65% に固定してあり、進捗そのものではなく「動いている＝働いている」という安心感を与えるタイプです。overflow: hidden と角丸で、流れる縞がトラックの内側に収まります。
使いどころ
- ダウンロードやアップロードの進行中表示
- インストールやビルドなど、時間が読みにくい長めの処理
- フォーム送信後の処理中フィードバック
縞の色は repeating-linear-gradient の 2 色を、流れる速さは animation の秒数で調整できます。塗りバーの width を JavaScript で書き換えれば、縞を残したまま実際の進捗割合の表示にもできます。横へ動き続ける模様は目が疲れるため、prefers-reduced-motion では流れを止め単色バーへ切り替える配慮をおすすめします。状態を支援技術に伝えるには role="progressbar" を添えると良いでしょう。
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
縞の色や流れる向きを変えられますか？
色は塗りバーの repeating-linear-gradient に並ぶ 2 色を書き換えてください。流れる向きはアニメーションで動かす background-position の符号を反転させると逆方向になります。縞の角度を変えたい場合は、グラデーションの 45deg の数値を調整します。
実際の進捗パーセントを反映できますか？
塗りバーの幅は現在 65% に固定されていますが、この width を JavaScript で実際の割合に合わせて書き換えれば、縞の流れを保ったまま進捗バーとして使えます。完了時に 100% にすればバーがトラック全体を満たします。