网页顶部加载进度条仿智能手机上浏览网页一样，手机上的浏览器进度条一般都在屏幕顶部，一条极细的小线条，当页面加载的时候，它就不断的加载显示进度。这样做的目的与页面中加载提示及软件应用中的进度提示的目的都是一致的为了优化用户体验。
首先介绍一下css3的实现方法：
<style type="text/css">
body{ margin:0; padding:0;}
@-moz-keyframes progressing {
0% {width:0px;}
100% {width:100%;}
}
@-webkit-keyframes progressing {
0% {width:0px;}
100% {width:100%;}
}
.progress {width:100%; height:5px; overflow:hidden; background-color:#27ccc0; position:fixed; top:0; left:0; z-index:9; -moz-animation:progressing 2s ease-out; -webkit-animation:progressing 2s ease-out;}
</style><div class="progress"></div>
再看一下jquery的实现方法：
<div id="loading">
<div id="bar"></div>
</div>
<script src="http://libs.useso.com/js/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
S("#loading div").animate({width:"100%"},800,function(){
setTimeout(function(){
$("#bar").fadeOut(500);
});
});
});
</script>
上面的css3动画属性存在浏览器兼容问题，而jquery的方法代码调用又不是很方便，所以推荐以下js插件：
插件一：NProgress.js
官方地址：http://ricostacruz.com/nprogress/
github地址：https://github.com/rstacruz/nprogress
插件使用方法：
1. 页面头部引入：
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
2. 添加回调进度条控件
<script>
NProgress.start();
NProgress.done();
</script>
3. 提供设计进度百分比api
NProgress.set(0.0); // 等同于 .start() 方法
NProgress.set(0.4);
NProgress.set(1.0); // 等同于 .done() 方法
.inc()
增加：增加进度栏，只是利用.inc()。这是一个随机量的增量。这将永远不会到100%：使用它为每一个图像负载（或类似）。
NProgress.inc();
如果你想通过特定的值递增，你可以用这个参数传递：
NProgress.inc(0.2);
更改进度开始时使用的最小百分比。（默认：0.08）
NProgress.configure({ minimum: 0.1 });
您可以使用模板更改标记。保持进度条的工作，role='bar' 的元素。查看默认模板以供参考。
NProgress.configure({
template: "
"
});
利用animation 调整动画设置（CSS的easing 字符串）和速度（毫秒）。（默认：ease and 200）
NProgress.configure({ easing: 'ease', speed: 500 });
关闭自动递增的事件设置为false。（默认情况：true）
NProgress.configure({ trickle: false });
调整递增进度和递增速度
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });
指定要更改的父容器。（默认：body）
NProgress.configure({ parent: '#container' });
插件二：LoadingBar.js
这是一款仿照Youtube网站上的ajax加载进度条特效插件。该加载进度条特效共有5种效果，每种效果都是通过ajax回调来增长进度条的刻度。
LoadingBar.js下载地址：
文章评论