页面 Loading 条基本人人都会用。它的原理很简单：在页头放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。
上图展示了传统 Wordpress 模板在浏览器中的载入顺序，Loading 条的出现和消失分布于头尾。
如果我们在页面的不同位置放置多个 JS ，每个 JS 用于逐步增加 Loading 条的宽度，那么这个 Loading 条无疑会更具实用价值。它在一定程度上缓解了访客等待载入的枯燥感，同时还能客观反映页面载入的进度。若再配以 jQuery 内建的动画效果，其完全可以与浏览器自带的状态条媲美。
先来看一个演示：地址。
要得到演示上的进度条效果，首先，引入 jQuery 框架(一定要放在页头 <head> 标签内)。然后在 <body> 标签起始位置放置：
<div id="loading"><div></div></div>
CSS 可以这么写：
#loading {
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}
准备工作到这里就做好了。
接着，请随意发挥，依照你对图二的理解，在模板各个部分的适当位置放置：
<script type="text/javascript">
$("#loading div").animate({width:"16px"})
</script>
其中红色数值应该随载入顺序逐步增加，直到 footer.php。另外别忘了在 footer.php 最末尾放上：
<script type="text/javascript">
$("#loading").fadeOut()
</script>
用于载入完毕后隐藏进度条。
相关推荐
NULL 博文链接：https://justcoding.iteye.com/blog/547319
上图展示了传统 WordPress 模板在浏览器中的载入顺序... 要得到演示上的进度条效果，首先，引入 jQuery 框架(一定要放在页头 <head> 标签内)。然后在 <body> 标签起始位置放置： 代码如下:<div id=”loa
jquery进度条载入特效
jquery进度条载入特效.zip
基于jQuery+CSS3进度条载入特效
30 个 jQuery & CSS3 加载动画和进度栏插件
ProgressBar（进度条）组件，这个还是挺好玩的，我们在自己做点什么的时候经常能用到，比如上传下载文件、导入导出文档啊、载入网页等等。 应用场景很多，使用起来还很简单。 示例： <!DOCTYPE html> <...
CSS3 引入jquery实现页面加载的LOADING效果，就是一个载入动画，一个加载的进度条效果，圆形小圆点在不断的旋转，当加载完毕后，自动消失，本页面由HTML5技术和jquery共同实现，LOADING和页面显示两者之间同样也加入...
jquery多彩百分比投票效果是一款多种颜色展示的百分比投票显示效果，载入页面是以动态的效果显示百分比对应的进度条，可以自定义颜色与数量，在js里面定义百分比的数值与颜色代码，很不错的一个百分比展示效果。
CSS3 引入jquery实现页面加载的LOADING效果，就是一个载入动画，一个加载的进度条效果，圆形小圆点在不断的旋转，当加载完毕后，自动消失，本页面由HTML5技术和jquery共同实现，LOADING和页面显示两者之间同样也加入...
新浪娱乐首页幻灯片焦点图代码是一款基于jQuery和jquery.orbit.js制作的网站使用的图片幻灯片焦点图效果代码，带有左右大箭头、播放/暂停按钮、图片载入进度条，支持图片自动轮播。
拖放区jQuery图像上传器插件参数： nameClass 上传文件名设置上传文件名单元格CSS类progressClass 上传进度栏设置进度条包装器块CSS类lineClass 上传进度行设置进度条块CSS类PreviewClass 上传预览设置图像预览块CSS...
jquery多彩百分比投票效果是一款多种颜色展示的百分比投票显示效果，载入页面是以动态的效果显示百分比对应的进度条，可以自定义颜色与数量，在js里面定义百分比的数值与颜色代码，很不错的一个百分比展示效果。
本文结合实例讲解如何使用jQuery和PHP实现Ajax即时上传文件的功能，用户只需选择本地图片确定后即实现上传，并显示上传进度条，上传完成后，显示图片信息。 HTML本示例基于jQuery以及相当出色的jquery.form插件，...
html5自定义视频控件，加入评论，载入弹幕，鼠标悬浮在进度条显示某时刻画面，视频卡端显示加载动画，清晰度切换等功能；并添加了弹幕隐藏显示设置，播放速度设置，镜像翻转设置。
该事件在整个文件的上传过程中定期性的被Flash控件自动触发，用以帮助开发者实时更新页面UI来制作上传进度条。 注意：该事件在Linux版本的Flash Player中存在问题，目前还无法解决。 - 传入参数 file object...