本文介绍如何使用jQuery实现网页加载进度条。由于浏览器未提供加载进度接口，文章提出通过HTML结构分段设置节点，利用animate方法模拟进度条宽度变化，实现从0%到100%的加载动画效果，并在加载完成后隐藏进度条。
网页加载进度条实现原理
网页进度条可直观反映当前网页加载状态，loading动画展示从0%至100%的加载过程。由于浏览器未提供页面加载进度接口，无法准确返回实际加载进度，本文利用jQuery实现该效果。
HTML结构设置
HTML
目前无浏览器可直接获取正在加载对象的大小，因此无法基于数据大小实现0-100%的加载显示。
需利用html代码逐行加载特性，在整页代码的若干跳跃行数中设置节点，进行大概的模糊进度反馈以实现加载效果。即页面每加载到指定区域，返回(n)%进度结果，通过多节点逐步显示加载进度。
假设页面按区块分为页头、左侧内容、右边侧栏、页脚四部分，将这四部分作为四个节点，当页面加载每个节点后设置大概加载百分比，页面结构如下：
<div id="header">
页头部分
</div>
<div id="mainpage">
左侧内容
</div>
<div id="sider">
右边侧栏
</div>
<div id="footer">
页脚部分
</div> 随后在<body>下的第一行添加进度条.loading。
<div class="loading"></div> CSS样式配置
CSS
需设置loading进度条的样式，包括背景色、高度、位置及优先级等。
.loading{
background:#FF6100; //设置进度条的颜色
height:5px; //设置进度条的高度
position:fixed; //设定进度条跟随屏幕滚动
top:0; //将进度条固定在页面顶部
z-index:99999 //提高进度条的优先层级，避免被其他层遮挡
} jQuery动画实现
jQuery
接下来，需在每个节点后添加进度动画，使用jQuery实现。
<div id="header">
页头部分</div>
<script type="text/javascript">
$('.loading').animate({'width':'33%'},50);
//第一个进度节点
</script>
<div id="mainpage">
左侧内容
</div>
<script type="text/javascript">
$('.loading').animate({'width':'55%'},50);
//第二个进度节点
</script>
<div id="sider">
右边侧栏
</div>
<script type="text/javascript">
$('.loading').animate({'width':'80%'},50);
//第三个进度节点
</script>
<div id="footer">
页脚部分
</div>
<script type="text/javascript">
$('.loading').animate({'width':'100%'},50);
//第四个进度节点
</script>
可见，每加载一个节点后，jQuery调用animate()动画方法实现进度条宽度变化，每个节点变化以50毫秒时间使进度条更流畅，最终从0%变化到100%，完成进度条动画。
当进度条达到100%后，页面加载完成，最后一步需隐藏进度条。
$(document).ready(function(){
$('.loading').fadeOut();
});