NProgress使用教程
GitHub地址
https://github.com/rstacruz/nprogres
演示网站
https://ricostacruz.com/nprogress/
安装NProgress.JS
(1)外链引入方式
<script src='nprogress.js'></script> <link rel='stylesheet' href='nprogress.css'/>
(2)NPM安装方式
$ npm install --save nprogress
import NProgress from 'nprogress' import 'nprogress/nprogress.css'
(3)CDN
用法
(1)基础用法
NProgress.start(); NProgress.done();
(2)高级用法
设置百分比:调用 .set(n) 方法,其中n的范围0-1
NProgress.set(0.0); // Sorta same as .start() NProgress.set(0.4); NProgress.set(1.0); // Sorta same as .done()
增量:调用 .inc() 方法,以随机量递增进度条,永远不会达到100%,用于每个图像负载(或类似)
NProgress.inc();
特定值增量:调用 .inc(n) 方法以特定值递增进度条
NProgress.inc(0.2); // This will get the current status value and adds 0.2 until status is 0.994
强制完成:通过传递 true 到 .done() 方法,将显示进度条,即使它未显示(默认如果不调用 .start() 方法, .done() 方法不会做任何事)
NProgress.done(true);
获取状态值:使用 .status 获取状态值
配置
minimum:更改启动时使用的最小百分比(默认:0.08)
NProgress.configure({ minimum: 0.1 });
template:可以使用 template 更改标记,若要使进度条保持工作,请将元素 role='bar' 保留在那里,参阅默认模板以进行参考
NProgress.configure({ template: "<div class='....'>...</div>" });
easing和speed:使用 easing(a CSS easing string)和 speed(ms)调整动画(默认:ease 和 200)
NProgress.configure({ easing: 'ease', speed: 500 });
trickle:将其设置为 false 关闭自动递增行为(默认:true)
NProgress.configure({ trickle: false });
trickleSpeed:调整滴答/递增的频繁度(以ms表示)
NProgress.configure({ trickleSpeed: 200 });
showSpinner:将其设置为 false 来关闭 Loading Spinner(默认:true)
NProgress.configure({ showSpinner: false });
parent:指定此选项以更改父容器(默认:body)
NProgress.configure({ parent: '#container' });