jindutiao

<style>
.progess{ width:100%; height:auto;float:left;}
.progess .loading{float:left; background:#eee; width:56px; height:24px;}
.loading div{width:0; height:24px; background:#b01415;}
.progess span{float:left; padding-left:5px; line-height:24px; font-size:14px;}
</style>
<s cript>
// 百分比滚动效果
function doProgress(){
    var len = $('.loading div').length;
    $('.loading div').css('width','0');
    for(i=0;i<=len-1;i++){
        var data=$('.loading div').eq(i).attr('data');
        $('.loading div').eq(i).animate({width:data},1000);
    }
}
$(document).ready(function() {
    doProgress();
})
</s cript>
<div class="progess">
    <div class="loading"><div data="50%"></div></div><span>50%</span>
</div>