非你网

前言

网站加入加载进度条，是件很酷的事情。NProgress.js 就是一个不错的插件。

官网地址：http://ricostacruz.com/nprogress/

CDN: http://www.bootcdn.cn/nprogress/

使用

NProgress 依赖于 jquery1.8 以上的版本。所以，在使用之前，先引入jquery。NProgress有自己的样式文件，也要引入进来。所以，在使用之前，要引入对应的css, js。如：

<link href="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">

<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script src="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>

引入上边文件后，你就可以任意的使用了。其常用方法以及配置。

NProgress.start(); #进度条开始运行了

NProgress.done(); #进度条结束

NProgress.set(0.3); #设置运行到的进度，最小为0，最大为1

NProgress.inc(); #进度增加一点点

NProgress.configure({ showSpinner: false }); #配置 （禁用进度环）

可配置的属性：

  var Settings = NProgress.settings = {
    minimum: 0.08,
    easing: 'ease',
    positionUsing: '',
    speed: 200,
    trickle: true,
    trickleRate: 0.02,
    trickleSpeed: 800,
    showSpinner: true,
    barSelector: '[role="bar"]',
    spinnerSelector: '[role="spinner"]',
    parent: 'body',
    template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
  };

有 easy，speed，template等可配置。

细节

进度条的目的就是展示给用户，该网站内容加载了多少。在什么时候开始加载，在什么时候结束呢。由于引入了 jquery 。所以，我们可以在 $(document).ready() 中开始，在 $(window).on("load", fun) 中结束。当然，你可以更早的开始。比如你引入了js之后，就可以开始了。

$(document).ready(function(){
    NProgress.start();   
});

$(window).on("load", function(){
    NProgress.done();   
})

默认，插件会显示在顶部，颜色是#29d，高度是2px。所以，如果你想改变该样式，可以在引入css之后，从新定义样式。如：

#nprogress .bar{
    background: #fd3b61;
}

NProgress不仅用在网页加载进度显示，ajax的请求过程也可以使用。当然，方法还是一样的。什么时候开始，什么时候结束。

额外

在页面中，也有其他进度条工具。下边这个还不错:

http://www.minddust.com/project/bootstrap-progressbar/demo/bootstrap-3-3-4/#h-default