平滑的进度条加载网页内容

平滑的进度条加载网页内容

 

演示

 

 

XML/HTML Code

1. <section class="container">  
2. <div class="progress"> <span class="blue" style="width:0%;"><span>0%</span></span> </div>  
3. </section>  

 

JavaScript Code

1. <script type='text/javascript'>  
2.     function loading(percent){  
3.         $('.progress span').animate({width:percent},1000,function(){  
4.             $(this).children().html(percent);  
5.             if(percent=='100%'){  
6.                 $(this).children().html('Loading Complete, Redirect to Home Page...    ');  
7.                 setTimeout(function(){  
8.                     $('.container').fadeOut();  
9.                     location.href="http://www.freejs.net";  
10.                 },1000);  
11.             }  
12.         })  
13.     }  
14.   </script>   

 

原文地址:http://www.freejs.net/article_jquerywenzi_255.html