jQuery实现简单进度条效果

一个用jQuery实现的简单进度条,当加载页面时,屏幕顶部出现一条极细的小线条,加载页面时会显示加载进度.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>jquery实现的简单进度条效果</title>
 6 <style>
 7 #web_loading{
 8     z-index:99999;
 9     width:100%;
10 }
11 #web_loading div{
12     width:0;
13     height:5px;
14     background:orange;
15 }
16 </style>
17 </head>
18 <div id="web_loading">
19     <div></div>
20 </div>
21 <script src="./jquery-1.9.0.min.js" type="text/javascript"></script>
22 <script type="text/javascript">
23  　　jQuery(document).ready(function(){
24   　　　　jQuery("#web_loading div").animate({"100%"},800,function(){ 
25    　　　　　　setTimeout(function(){
　　　　　　　　　　　　jQuery("#web_loading div").fadeOut(500); 
26  　　　　 　　 }); 
27  　　　　 }); 
28 　　 });
29 </script>