jquery プラグイン NProgress.js は Web ページの読み込み進行状況を作成します bar_jquery

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