加载图片动画

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery.js"></script>
<style type="text/css">
    .circle{216px;height:215px;position:absolute;border-radius:50%;background:#e47235;}
    .pie_left,.pie_right{216px;height:216px;position:absolute;top:0;left:0;}
    .left,.right{display:block;216px;height:216px;background:#b3b3b3;border-radius:50%;position:absolute;top:0;left:0;transform:rotate(0deg);}
    .pie_right,.right{clip:rect(0,auto,auto,108px);}
    .left,.pie_left{clip:rect(0,108px,auto,0);}
    .mask{196px;height:196px;border-radius:50%;left:10px;top:10px;background:#222126;position:absolute;text-align:center;line-height:196px;font-size:56px;font-family:'microsoft yahei';color:#b3b3b3;}
</style>
</head>
<body>
<div class="circle">
    <div class="pie_left"><div class="left"></div></div>
    <div class="pie_right"><div class="right"></div></div>
    <div class="mask J-num"><span>0</span>%</div>
</div>
    <script>
    var srcs = [
            'images/water.png',
            'images/water-light.png',
            'images/bg.jpg',
            'images/1-bg.png',
            'images/3-bg.png',
            'images/4-bg.png',
            'images/bg1.jpg',
            'images/index-pro.png',
            'images/index-txt2.png',
            'images/logo.png',
            'images/pro-1.png',
            'images/pro-2.png',
            'images/pro-intro-nav.png',
            'images/pro-intro-tit.png',
            'images/rope2.png',
            'images/2-bg.png',
            'images/3-txt-a.png',
            'images/3-txt-b.png',
            'images/3-txt-c.png',
            'images/3-txt-d.png',
            'images/back.png',
            'images/index-txt1.png',
            'images/load-txt.png',
            'images/nav-bg.png',
            'images/pro-1-txt.png',
            'images/pro-2-txt.png',
            'images/pro-intro.png',
            'images/rope1.png',
            'images/rope3.png',
            'images/1.png',
            'images/pro-rope1.png',
            'images/pro-rope2.png',
            'images/pro-rope3.png'
      ];
      var oImages = [],n=0,i;
    function loading(){
        for (i=0,len=srcs.length;i<len;i++){
            (function(i){
                oImages[i]=new Image()
                oImages[i].onload=function(){
                    n++;
                    num=parseInt((n/len*100).toFixed(2));
                    if(n<len/2){
                        $(".left").css("transform","rotate("+num*180/100+"deg)");
                    }else{
                        $(".left").css("transform","rotate(180deg)");
                        $(".right").css("transform","rotate("+(num-50)*180/100+"deg)");
                    }
                    $(".J-num").html(num+"%");
                    if(n>=len){
                        $(".J-num").html(100+"%");
                        $(".right").css("transform","rotate(180deg)");
                        //
                    }
                };
                oImages[i].src=srcs[i];
            })(i);
        }
    }
    loading();
    </script>
</body>
</html>
demo: 预览地址