在页面中载入进度条，是一种常见的特效。它比较实用，当页面的元素比较多的时候，使用它可以让网友不至于等的着急。其原理很简单：在网页的头部放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。 此效果也有插件可实现，不过此次分享的是自定义方法。
效果 
demo
http://build.gzwhir.com/Whir_WEB/jsdemo/loading_1/index.shtml
如何实现呢？
1、首先在开始的地方放置
<body> <div id="loading"></div> </body> 2、在和之间放置样式和jquery框架
3、给loading层设置样式
<style type="text/css"> #loading{z-index:1;padding:5px 0 5px 29px; background:url(images/loadingwy.gif) no-repeat 10px top;left:0;top:0;width:90px; position:fixed; height:21px} </style>4、在页面的底部放置
<script type="text/javascript"> $("#loading").fadeOut(3000) </script>文章来源: 给页面加上loading加载效果