网页开发-一个轻量级的进度条组件NProgress
前言
NProgress 是一个轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中
官方网站：http://ricostacruz.com/nprogress/
安装
npm install --save nprogress将nprogress.js和nprogress.css添加到您的项目。
<script src='nprogress.js'></script><link rel='stylesheet' href='nprogress.css'/>用法
只需要调用start()和done()来控制进度条
NProgress.start(); // 开始加载NProgress.done(); // 加载完成NProgress还提供了其他几个方法，如设置百分比，调用.set(n)来控制进度，其中n的取值范围为0-1。调用.inc()产生一个随机增量这将永远不会达到100％：将其用于每个图像加载（或类似加载）。通过传递 true 参数给done()，使进度条满格，强制完成。
NProgress.set(0.0); // Sorta same as .start()NProgress.set(0.4); // 要设置进度百分比NProgress.set(1.0); // Sorta same as .done()NProgress.inc(); // 递增-递增进度条 如果要增加特定值，可以将其作为参数传递NProgress.inc(0.2); // 这将获取当前状态值并添加0.2直到状态为0.994
// 传递true到done()，即使未显示进度条也将显示进度条。（默认 如果.start()不调用，.done()*不会做任何事情）
NProgress.done(true); // 强制完成// 获取状态值 要获取状态值，请使用.statusNProgress.status实际使用中，我们一般在Ajax或者Pjax加载时，调用NProgress。你可以在jQuery提供的Ajax，或者使用Pjax，或者在其他框架如Vue.js中都可以很好的使用NProgress。
这里我们示例演示使用Ajax方法请求远程数据，然后调用进度条加载的过程。
$('#loading').on('click', function(event) {
event.preventDefault();
NProgress.start();
$.get('data.php', function(data) {
$('#msg').html(data);
NProgress.done();
});});参数配置
minimum-最小值
设置开始时最低百分比，默认是0.08。
NProgress.configure({ minimum: 0.1 });template-模板
改变进度条的HTML结构。为了保证进度条正常工作，需要一个包含role='bar' 属性的元素。
NProgress.configure({
template: "<div class='....'>...</div>"});ease和speed-CSS动画属性
ease可传递CSS3缓冲动画字符串（如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）。speed为动画速度（默认200，单位ms）。使用缓动（CSS缓动字符串）和速度（以毫秒为单位）调整动画设置。（默认：ease和200）
NProgress.configure({ easing: 'ease', speed: 500 });trickle-自动递增
通过将此设置为来关闭自动递增行为false , 是否显示进度条，默认：true
NProgress.configure({ trickle: false });进度条增加幅度和频率 trickleSpeed trickleRate
设置每次进度条步进速度（ms）。单位分别是 百分比、毫秒
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });showSpinner
是否显示环形进度动画，默认true。
NProgress.configure({ showSpinner: false });parent -父级容器
指定改变的父容器，默认body。
NProgress.configure({ parent: '#container' });定制化
当然，你也可以修改nprogress.css以达到你想要的进度条外观，比如改变进度条背景颜色、高度等等。