マップを見てください
私たちのプログラムは、ページが切り替えられるたびに、プログレスバーが一番上に存在する場合、それは非常にユーザーエクスペリエンスを向上させます。
npropgressプラグ
簡単な使い方 - 例として、Vueのプロジェクト（詳細な構成、ドキュメントを表示githubの上のアドレスをクリックしてください）
使用する最も簡単な方法：VUEプロジェクトごとに、ルーティングスイッチは、プログレスバーをロードしています
インストール
npm install --save nprogress
導入
ルーティングの設定ファイルで導入され、ロード後と読み込みをルーティングする前に2つのフック関数を書き込み、
// 引入
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
// 进度条配置项这样写
NProgress.configure({
showSpinner: false
});
// 路由跳转前钩子函数中 - 执行进度条开始加载
router.beforeEach((to, from, next) => {
NProgress.start();
});
// 路由跳转后钩子函数中 - 执行进度条加载结束
router.afterEach(() => {
NProgress.done();
});
それが導入されている場合は、次のように、CDN
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
プログレスバーの色を設定します。
品目マスターで、スタイルのCSSファイルに入れて、一般的なVUEのプロジェクトは、場合main.js導入された、以下のCSSスタイルです
#nprogress .bar {
background: #00CC00 !important; //自定义颜色
}
構成アイテム
手動制御プログレスバーの増分はパラメータの範囲は0 - 1、引数を渡さない、各コールがランダムに増加しますが、コールしない限り、100％に到達することはありませんNProgress.done()。
// 调用之前如果进度条的状态 50%
NProgress.inc(0.2);
// 调用之后 70%
プログレスバーがロードされました
パラメータtrue：でもコールせずにNProgress.start()も表示されますと、0％から実行プログレスバー-状態の100％、その後消えます。
パラメータを指定しない：あなたが呼び出していない場合NProgress.start()、このコマンドは何もしません。
NProgress.done(true);
最小パーセンテージ（デフォルトは0.08である）プログレスバー
NProgress.configure({
minimum: 0.3
});
あなたは、テンプレートを使用してマークを変更することができます。あなたは=「バー」要素役割を保持したい作業の進捗状況を、維持するために、デフォルトのテンプレートを参照してください。
// 默认模板
NProgress.configure({
template: "<div class='....'>...</div>"
});
// 举例
NProgress.configure({
template: "<div class='other-instance'><div role='bar'>更改标记</div></div>"
})
アニメーション速度調整設定の使用を容易に、容易にアニメーション文字列が送信されてもよいCSS3緩衝液（例えば、容易に、線形、容易にアウト、容易・イン・アウト、立方ベジェ、イン容易）、（ミリ秒）アニメーションの速度の速度。それぞれデフォルトease 200
NProgress.configure({
easing: 'ease',
speed: 200
});
自動インクリメント動作をオフにします
NProgress.configure({
trickle: false
});
周波数調整ミリ秒を増やします
NProgress.configure({
trickleSpeed: 200
});
オフスピナー、デフォルトはON状態である（すなわち円右上ローディングアイコン上図）
NProgress.configure({
showSpinner: false,
});
親コンテナを変更
NProgress.configure({
parent: '#container'
});
