你也许已经在 Youtube 上看过了那道红色激光脉冲，它会在你切换页面时出现。其实许多移动浏览器的进度条都是这个样式，但是在网页上实现可不多见。不过，有了 NProgress 这个 jQuery 插件，你也可以轻松实现！

安装

依赖于 jQuery (1.8版本及以上)，添加 nprogress.js 和 nprogress.css 到你的项目中。

HTML代码：

CSS代码：

/* 导入进度条相关CSS */

@import url('http://cdn.gbtags.com/nprogress/0.1.3/nprogress.min.css');

/* 基础CSS */
body{
  padding:0;
  margin:50px 0;
}

section{  
  padding:0;
  margin:0;
}

/* 容器中图片CSS */
section img{
  width: 50%;
  padding:0;
  margin:0;
  float:left;
  display:none;
}

JS代码：

/* 随机生成颜色方法/参考此代码：http://www.gbtags.com/gb/rtreplayerpreview/163.htm */
function colorGenerator() {
  var letters = '0123456789ABCDEF'.split(''), color = '';
  for (var i = 0; i < 6; i++ ) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

/* 生成图片并且添加到section元素里 */
function imgGenerator(num){
  for(var i=0;i');
  }
}

imgGenerator(100);//这里添加100个“来图”生成图片

var completed = 0,
    total = $('img').length;

NProgress.start(); //此方法将启动进度条

/* 接下来我们处理图片预加载，并且和进度有序的组织起来 */

$('section').imagesLoaded().done(function(instance){
  NProgress.done(); //这里调用进度条指示完成
}).progress(function(instance, image){
  completed++; //添加计数器
  var imgprogress = completed/total; //生成进度数值
  NProgress.set(imgprogress); //每次加载完毕一张图片，则设置进度为新值，使用.set方法
  $(image.img).fadeIn(1500); //每一张图片完成加载后，则淡入显示出来
});