码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现简单进度条效果

时间:2015-12-08 00:23:41      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:

一个用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({width:"100%"},800,function(){ 
25          setTimeout(function(){
            jQuery(
"#web_loading div").fadeOut(500); 26         }); 27      }); 28    }); 29 </script>

 

jQuery实现简单进度条效果

标签:

原文地址:http://www.cnblogs.com/sunshinegirl-7/p/5027815.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!