pace.js
pace.jsは設定が一切不要でページロード中にプログレスバーを自動で実装してくれるスクリプトです。何の設定も無くJSとCSSを読み込むだけで上デモのようにページロードのプログレスバーを表示してくれます。
非依存で単体で動作してくれます。デモではロード時間までをパーセントで表示していますが、これらも全て自動で処理してくれます。
プログレスバーはCSSで管理されており、いくつか選べるようになっています。プロジェクトページでCSSがダウンロードできるのでお好みのスタイルを選んでください。
<script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/pace-js@latest/pace-theme-default.min.css">
CDNも用意されています。テストしたいなら上の2行をheadタグ内に加えるだけで、ページロード時のプログレスバーを実装します。
スタイルがCSSのみなので好みのスタイルが無ければご自身でカスタマイズも可能ですね。とても楽で良いです。ライセンスはMITとの事。