NProgress.js は、リアルな細線アニメーションを使用してユーザーが Web ページ上で何が起こっているかを確認できる、非常に細いナノスケールの進行状況バーです。
Youtube でページを切り替えると表示される赤いレーザー パルスを見たことがあるかもしれません。実際、多くのモバイル ブラウザーのプログレス バーにはこのスタイルが採用されていますが、Web ページに実装されることはまれです。しかし、NProgress jQuery プラグインを使用すると、それを簡単に実現できます。
NProgress.js は、複雑な Web ページのスリムなプログレス バーに適用されます。 Google、YouTube、Medium からインスピレーションを受けています。
インストール
jQuery (バージョン 1.8 以降) に応じて、nprogress.js と nprogress.css をプロジェクトに追加します。
使用方法
NProgress.start() — 進行状況バーを表示します
NProgress.set(0.4) — 割合を設定します
NProgress.inc() — 少し追加
NProgress.done() — 完了進行状況バー
次のこともできます...
Ajax を呼び出す場所に追加してください。 jQueryのajaxStartイベントとajaxStopイベントにバインドします
Turbolinks/Pjax を使用せずに素晴らしいプログレス バーを作成してください。 $(document).ready と $(window).load
にバインドします。
設定プラグイン
最小パーセントを最小値まで変更します。
NProgress.configure({ 最小: 0.1 });
テンプレートを使用してマークアップ構造を変更できます。プログレスバーが適切に機能するには、role='bar' 属性を含む要素が必要です。
NProgress.configure({ template: "..." });
イーズ (CSS のイージング値) を使用して、アニメーションの設定と速度 (ミリ秒) を調整します。
NProgress.configure({ easy: 'ease',speed: 500 });
進行状況バーのステップをオフにしますか?トリクルを false に設定します。
NProgress.configure({ trickle: false });
tricleRate (各ステップの増加量) と trickleSpeed (ステップ間隔、ミリ秒単位) を調整できます。
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });
進行状況リングを無効にしますか? showSpinner を false に設定します。
NProgress.configure({ showSpinner: false });
オンラインデモ http://ricostacruz.com/nprogress/
ソース コードのダウンロード https://github.com/rstacruz/nprogress