Ajax Loader
×
HTML
 
1
 
2
<div class="main_div">
3
<div id="load_div">
4
        <span></span>
5
    <span></span>
6
</div>
7
</div>
 
CSS
body{padding:0; margin:0;}
1
body{padding:0; margin:0;}
2
.main_div{
3
        width:590px;
4
        height:228px;
5
        background:url(images/bg.jpg) no-repeat;padding:172px 0 0 90px;}
6
#load_div{
7
        position:relative;
8
        width:500px;
9
        height:55px;
10
        border-radius:4px;
11
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(55,60,70,0.9)), color-stop(0.5, rgba(45,50,55,0.9)), color-stop(0.5, rgba(35,40,45,0.9)), to(rgba(25,30,35,0.9)));
12
}
13
#load_div span:nth-child(1){
14
        display:block; border:1px #000 solid;
15
        border-radius:10px;
16
        width:440px;
17
        height:10px;
18
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(20,20,20,1)), to(rgba(30,35,40,1)));
19
        position:absolute; top:50%; left:50%; margin:-7px 0 0 -221px;}
20
#load_div span:nth-child(2){
21
        display:block; 
22
        border-radius:8px; 
23
        width:0; 
24
        height:8px; 
25
        box-shadow:0 0 8px rgba(170,210,50,1); 
26
        border-top:1px rgba(255,255,255,0.5) solid; 
27
        border-bottom:1px rgba(100,130,10,0.6) solid;
28
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(175,215,40,1)), to(rgba(140,185,10,1)));
29
        position:absolute; top:50%;
30
        left:50%;
31
        margin:-6px 0 0 -220px;
32
}
 
JavaScript
<script src="http://files.cnblogs.com/wangdetian168/jquery-1.4.2.min.js"></script>
1
<script src="http://files.cnblogs.com/wangdetian168/jquery-1.4.2.min.js"></script>
2
$(function(){
3
  if($('#load_div span:nth-child(2)').outerWidth() <= 0){
4
    $('#load_div span:nth-child(2)').animate({width:'440px'},10000);
5
  }
6
})
 

Untitled

CSSDeck G+