Untitled

<div class="main_div">

<div id="load_div">

        <span></span>

    <span></span>

</div>

</div>

body{padding:0; margin:0;}

.main_div{

        width:590px;

        height:228px;

        background:url(images/bg.jpg) no-repeat;padding:172px 0 0 90px;}

#load_div{

        position:relative;

        width:500px;

        height:55px;

        border-radius:4px;

        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)));

}

#load_div span:nth-child(1){

        display:block; border:1px #000 solid;

        border-radius:10px;

        width:440px;

        height:10px;

        background: -webkit-gradient(linear, left top, left bottom, from(rgba(20,20,20,1)), to(rgba(30,35,40,1)));

        position:absolute; top:50%; left:50%; margin:-7px 0 0 -221px;}

#load_div span:nth-child(2){

        display:block; 

        border-radius:8px; 

        width:0; 

        height:8px; 

        box-shadow:0 0 8px rgba(170,210,50,1); 

        border-top:1px rgba(255,255,255,0.5) solid; 

        border-bottom:1px rgba(100,130,10,0.6) solid;

        background: -webkit-gradient(linear, left top, left bottom, from(rgba(175,215,40,1)), to(rgba(140,185,10,1)));

        position:absolute; top:50%;

        left:50%;

        margin:-6px 0 0 -220px;

}

<script src="http://files.cnblogs.com/wangdetian168/jquery-1.4.2.min.js"></script>

$(function(){

  if($('#load_div span:nth-child(2)').outerWidth() <= 0){

    $('#load_div span:nth-child(2)').animate({width:'440px'},10000);

  }

})