NProgress进度条使用详解

都知道NProgress怎么开始怎么结束，今天再来更深入学习一下它，本文章以vue项目中的使用展开介绍。

示例

DEMO

安装

1

npm i nprogress -S

项目中引入

在main.js中引入要使用的NProgress

1
2

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

开始使用

基础用法

开启进度条

1

NProgress.start(); 

关闭进度条

1

NProgress.done();

设置进度（合理的设置进度可以给用户带来积极的体验）

1

NProgress.set(0.8); 

更多用法

递增

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

1

NProgress.inc();

强制完成

通过传递 true 参数给done()，使进度条满格，即使它没有被显示。

1

NProgress.done(true);

高阶用法

是否展示圆环

1

NProgress.configure({showSpinner: false});

最小百分比

1

NProgress.configure({minimum:0.5});

进度条动画和时长

调整动画设置，ease可传递CSS3缓冲动画方式（如linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier）。

speed为动画速度（单位ms）。

1

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

配置统统扔进main.js即可

1

NProgress.configure({ showSpinner: false, minimum: 0.6, ease:'ease-in-out', speed: 500 })