Write the Code. Change the World.

7月 22

前言

网站加入加载进度条,是件很酷的事情。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

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注