jqueryのWebページにプログレスバーをロードするNProgress.js

NProgress.jsは極めて細いナノスケールの進捗バーで、現実的な細い線のアニメーションでユーザーにホームページが起こっていることを見せる!
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
プラグインの設定
最小パーセントはminimumで変更します.

NProgress.configure({ minimum: 0.1 });

templateでタグ構造を変更できます.進捗バーが正常に動作するように、role='bar'属性を含む要素が必要です.

NProgress.configure({ template: "..." });

アニメーション設定と速度speed(ミリ秒ms)をease(CSSのeasing値)で調整します.

NProgress.configure({ ease: 'ease', speed: 500 });

進捗バーを閉じてステップしたいですか?trickleをfalseに設定します.

NProgress.configure({ trickle: false });

trickleRate(ステップごとにどれだけ成長するか)とtrickleSpeed(ステップ間隔、ミリ秒ms単位)を調整できます.

NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });

進捗ループを無効にしますか?showSpinnerをfalseに設定します.

NProgress.configure({ showSpinner: false });

  :http://www.wufangbo.com/nprogress-js/