nprogress进度条的安装与使用

NProgress 是一个轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中
npm官网链接 https://www.npmjs.com/package/nprogress

1、安装命令

npm

npm install --save nprogress 

CDN

 - https://unpkg.com/nprogress@0.2.0/nprogress.js
 - https://unpkg.com/nprogress@0.2.0/nprogress.css

引入
script标签

<!-- 进度条 -->
<script src='nprogress.js'></script>
<!-- 样式必须引入 -->
<link rel='stylesheet' href='nprogress.css'/>

模块引入

import NProgress from 'nprogress' // 进度条
import 'nprogress/nprogress.css' //样式必须引入

2、使用方法

基础用法
简单的调用start()和done()控制进度条

NProgress.start();
NProgress.done();

高级用法
通过set(n)方法来设置百分率进度条，这里的n是从0到1的数字

NProgress.set(0.0);      // 与.start（）
NProgress.set(0.4);
NProgress.set(1.0);     //与.done（）相同

递增
可以使用inc()随机增长进度，注意，这个方法永远不会达到100%

NProgress.inc();

如果要增加特定值，可以将其作为参数传递

NProgress.inc(0.2);     //这将获得当前状态值并加0.2，直到状态为0.994

强制完成
通过使用done()让进度条关闭

NProgress.done(true);

3、NProgress 配置

参数	默认值	类型	说明
minimum	0.08	number	百分比
template	html	string	样板
ease	ease	string	动画设置 如ease、linear 等
speed	200	number	速度设置毫秒ms
trickle	true	boolean	通过将此设置为来关闭自动递增
trickleRate	/	number	细流速率 每毫米增加多少 0 - 1
trickleSpeed	/	number	细流速度 毫秒ms
showSpinner	true	boolean	显示为转轮
parent	body	string	指定此项以更改父容器 默认body

NProgress.configure({
    easing: 'speed',  // 动画方式    
    speed: 500,  // 递增进度条的速度    
    showSpinner: false, // 是否显示加载ico    
    trickleSpeed: 200, // 自动递增间隔    
    minimum: 0.3 // 初始化时的最小百分比
});

4、vue中修改nprogress进度条颜色

在App.vue中的style中增加

#nprogress .bar {
    background: red !important; //自定义颜色
}