プログレスバーでページのスクロール進捗状況を可視化
プログレスバーとは
プログレスバーは、長時間かかるタスクの進捗状況がどの程度完了したのかを視覚的・直感的に表示するバーのことです。ファイルの転送時やアプリケーションのインストール時などによく見かけますね。％表記でどこまで完了したかを数値で表示するものもありますが、今回はページのスクロール進捗状況をアニメーションで分かりやすく表示する方法をご紹介します。
HTMLタグ<progress>
プログレスバー自体をイチから作ってもよいのですが、実はHTMLのタグに<progress>というものが用意されていますので、今回はこれを利用します。アニメーションしないプログレスバーであればHTMLだけで実装が可能で、ある程度CSSで見た目の調整もできます。
<!-- _HTML -->
<progress value="50" min=”0” max="100">50%</progress>
・value：バーの進捗状況を表す数値
・min：バーの最小値
・max：バーの最大値
タグの中のテキストは通常は表示されません（古いブラウザでタグ対応していない場合に表示されます）
Google Chromeのデフォルトではこのように表示されます。
ページのスクロール量に応じてアニメーションをつける
ページのスクロール量に応じてバーをアニメーションさせます。
<!-- _HTML -->
<progress id="progress-bar" value="" min="0" max="100"></progress>
進捗状況を0～100とする場合、minを0、maxを100に設定します。（アニメーションをよりなめらかにしたい場合は、目盛りを細かくするためmaxの数値を増やします）
実際の進捗状況であるvalueはJavaScriptで操作するので空にしておきます。
/* _CSS */
/* スタイルをリセット */
progress{ -webkit-appearance: none; }
/* バーの背景色 */
progress::-webkit-progress-bar { background-color: #ffffff; }
/* バーの色 */
progress::-webkit-progress-value { background-color: #00aa8c; }
progress::-moz-progress-bar { background-color: #00aa8c; }
progress::-ms-fill { background-color: #00aa8c; }
CSSで幅、高さ、バーの色、背景色、ボーダーなどを指定することができます。ベンダープレフィックスが必要なので併せて設定しましょう。
//_JavaScript
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
//#progress-barを取得
const progress = document.getElementById("progress-bar");
//ページ読み込み時、スクロール時に発火
$(window).on("load scroll ", function () {
//スクロール量（px）
let scrollvaluepx = document.documentElement.scrollTop;
//まだスクロールされていない部分の高さを取得
let hiddenHeight =
document.documentElement.scrollHeight –
document.documentElement.clientHeight;
//スクロール量（％）乗算の値は<progress>のmax値に合わせる
let scrollValue = Math.round((scrollValuepx/ hiddenHeight) * 100);
//<progress>のvalueにスクロール値を代入
progress.value = scrollValue;
});
</script>
jQueryを読み込み、ページのスクロールした際にプログレスバーをアニメーションさせるJavaScriptを記述します。
デモページ
上記を調整したデモページがこちらになります。上部に常にプログレスバーを表示するようにしてみました。スクロールして確認してみてください。
プログレスバーはユーザーにページのコンテンツ量をひと目で知らせたり、段階を踏んで情報を入力してもらうページでのタスク量を視覚的に知らせたり、といった活用法があります。
組み込み方次第でユーザビリティの向上が期待できますので、利用してみてください。
WEBプログラマー ／ O.K
