css+js 实现在后台加载时前端出现等待的圆形图标，或者批量导入时出现等待图标提高用户体验，废话少说直接上代码 <style type="text/css"> body {

css+js 实现在后台加载时前端出现等待的圆形图标，或者批量导入时出现等待图标提高用户体验，废话少说直接上代码

<style type="text/css">
    body {
        margin:0;
        padding:0;
    }
    /* for busy */
    #busyIcon {
        z-index:99999;
        position:absolute;
        top:0;left:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0);
        /*float: left;
        margin: 0 auto;*/
    }
    .container{
        width:110px;
        height:110px;
        background-color:black;
        opacity:0.8;
        margin-top:-50px;
        margin-left:-50px;
        position:absolute;
        top:30%;
        left:50%;
        -webkit-border-radius:10%;
    }
    .top,.base{
        height:30%;
    }
    .spinner{
        height:40%;
        width:40%;
        position:relative;
        margin:0 auto;
    }
    .spinner div{
        width:12%;
        height:26%;
        background-color:white;
        position:absolute;
        left:44.5%;
        top:37%;
        opacity:0;
        -webkit-border-radius:30%;
        -webkit-animation:fade 1s linear infinite;
    }
    .spinner div.bar1{
        -webkit-transform:rotate(0deg) translate(0,-142%);
        -webkit-animation-delay:0s;
    }
    .spinner div.bar2{
        -webkit-transform:rotate(30deg) translate(0,-142%);
        -webkit-animation-delay:-0.9167s;
    }
    .spinner div.bar3{
        -webkit-transform:rotate(60deg) translate(0,-142%);
        -webkit-animation-delay:-0.833s;
    }
    .spinner div.bar4{
        -webkit-transform:rotate(90deg) translate(0,-142%);
        -webkit-animation-delay:-0.75s;
    }
    .spinner div.bar5{
        -webkit-transform:rotate(120deg) translate(0,-142%);
        -webkit-animation-delay:-0.667s;
    }
    .spinner div.bar6{
        -webkit-transform:rotate(150deg) translate(0, -142%);
        -webkit-animation-delay: -0.5833s;
    }
    .spinner div.bar7 {
        -webkit-transform:rotate(180deg) translate(0, -142%);
        -webkit-animation-delay: -0.5s;
    }
    .spinner div.bar8 {
        -webkit-transform:rotate(210deg) translate(0, -142%);
        -webkit-animation-delay: -0.41667s;
    }
    .spinner div.bar9 {
        -webkit-transform:rotate(240deg) translate(0, -142%);
        -webkit-animation-delay: -0.333s;
    }
    .spinner div.bar10 {
        -webkit-transform:rotate(270deg) translate(0, -142%);
        -webkit-animation-delay: -0.25s;
    }
    .spinner div.bar11 {
        -webkit-transform:rotate(300deg) translate(0, -142%);
        -webkit-animation-delay: -0.1667s;
    }
    .spinner div.bar12 {
        -webkit-transform:rotate(330deg) translate(0, -142%);
        -webkit-animation-delay: -0.0833s;
    }
    @-webkit-keyframes fade {
        from {opacity: 1;}
        to {opacity: 0.25;}
    }
    /*End busy*/
</style>

<div id="busyIcon">
    <div class="container">
        <div class="top"></div>
        <div class="spinner">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
            <div class="bar4"></div>
            <div class="bar5"></div>
            <div class="bar6"></div>
            <div class="bar7"></div>
            <div class="bar8"></div>
            <div class="bar9"></div>
            <div class="bar10"></div>
            <div class="bar11"></div>
            <div class="bar12"></div>
        </div>
        <div class="base" id="percentage">导入中...</div>
    </div>
</div>

这是那个圆形的等待图标，然后百分比可以通过两个ajax访问后台，将计算好的进度百分比存入sesstion中，然后第二个ajax去调用session中的百分比并将其传入页面！就是这么舒服

两篇参考文章

http://www.cnblogs.com/jr1993/p/4677921.html

http://www.zhangxinxu.com/wordpress/2010/08/css3js%E5%AE%9E%E7%8E%B0%E5%A4%9A%E5%BD%A9%E7%82%AB%E9%85%B7%E6%97%8B%E8%BD%AC%E5%9C%86%E7%8E%AF%E6%97%B6%E9%92%9F%E6%95%88%E6%9E%9C/