在web应用开发中，有很多加载资源或者网络等待的场景需要在界面上做一个加载动画，让用户知道你这个应用程序正在运行而不是已经挂掉了。

应用场景

如果你经常使用GitHub，那应该会注意到GitHub点击链接后，会在网页的顶部出现一个进度条

虽然用css3写一个，也是分分钟的事情。但是本着不重复造轮子的想法，找到了NProgress这个插件。

如何使用？

安装

nprogress的安装支持直接script标签引用和npm包安装

script引用

<script src='nprogress.js'></script><link rel='stylesheet' href='nprogress.css'/>或者也可以直接使用cdn
https://unpkg.com/nprogress@0.2.0/nprogress.js
https://unpkg.com/nprogress@0.2.0/nprogress.css

npm安装

npm install --save nprogress

使用

简单使用

nprogress使用方式非常的简单

NProgress.start();

NProgress.done();

高级用法

使用set函数可以设置进度条的位置，支持0-1之间

NProgress.set(0.0);     // Sorta same as .start()

NProgress.set(0.4);

NProgress.set(1.0);     // Sorta same as .done()

inc()函数会随机增加进度条的进度，但是永远不会到达100%，除非你调用了done()函数

NProgress.inc();

自定义NProgress的样式

nprogress的样式只有一个简单的css文件，可以很方便的自定义修改

---

github地址：https://github.com/rstacruz/nprogress