animation上传状态案例

1.html

<div class="add-content pop-width-650 BoxWrap" id="uploadFileTwoPop" style="display: block;">
    <div class="add-header">
        <div class="add-header-l">添加项目</div>
        <div class="add-header-r"><a href="javascript:;" class="add-header-r" title="关闭" style="margin-top: 13px;"></a></div>
    </div>
    <div class="add-branch">
        <div class="step-list">
            <ul class="disabled clearfix">
                <li class="on">完善信息<span class="number">1</span></li>
                <li class="on">项目解析<span class="number">2</span></li>
                <li class="disabled">完成<span class="number">3</span></li>
            </ul>
        </div>

        <div class="up-bd pdn">
            <div class="upload-ing">
                <div class="pop-radius error" id="radiusNum4"><b>4</b>项</div>
                <div class="upload-txt">
                    <!--   <p>正在上传项目文档</p>-->
                    <h4 id="upTotalPrompt" class="error">批量归集数据失败，请重新上传文件</h4>
                    <p class="error" id="serviceError" style="display: block;">批量归集数据失败，请检查文件是否为正确的格式！</p>
                </div>
            </div>

            <ul class="upload">
                <li id="popouuploadState" class="">
                    <span class="upload-fin upload-now"></span>
                    <img class="icon-rotating" align="absmiddle" src="../../resources/img/min/icon-popouupload.png">
                    <p>上传项目文档成功</p>
                </li>
                <li id="popouidentifyState" style="display: list-item;">
                    <span class="upload-fin upload-now"></span>
                    <img class="icon-rotating" align="absmiddle" src="../../resources/img/min/icon-popouidentify.png">
                    <p>智能识别文档成功</p>
                </li>
                <li id="popoucleanState" style="display: list-item;">
                    <span class="upload-fin upload-now"></span>
                    <img class="icon-rotating" align="absmiddle" src="../../resources/img/min/icon-popouclean.png">
                    <p>自动清洗数据成功</p>
                </li>
                <li id="popoubatchState" style="display: list-item;" class="error">
                    <span class="upload-fin"></span>
                    <img class="icon-rotating" align="absmiddle" src="../../resources/img/min/icon-imputation.png">
                    <p>批量归集数据失败</p>
                </li>
            </ul>
        </div>
    </div>
    <div class="footer-button">
        <a href="javascript:void(0);" class="disabled" style="width: 140px; color: rgb(255, 255, 255); background: rgb(221, 221, 221); border: 1px solid rgb(221, 221, 221); display: none;" id="aotuCompleteJump">文件上传至后台解析..</a>
        <a href="javascript:void(0);" class=" enabled" style="color: rgb(255, 255, 255); background: rgb(141, 214, 248); padding: 7px 30px; border: 1px solid rgb(141, 214, 248); display: inline;" id="againUpload">重新上传文件</a>
    </div>
</div>

2.css

/* 上传状态*/
.upload{padding:20px 18px 60px 18px;overflow:hidden;}
.upload li{float:left;position:relative;width:110px;height:82px;margin:0 6px;text-align:center;}
.upload .upload-fin{background:url(../img/min/icon-rotating.png) no-repeat;width:82px;height:82px;display:block;margin-left:14px;}
.upload .upload-now{background:url(../img/min/icon-rotating-h.png) no-repeat;width:82px;height:82px;display:block;margin-left:14px;}
.upload .error span{background:url(../img/min/icon-rotating-error.png) no-repeat;}
.upload .error p{color:#e0515a;}
.upload li img{position:absolute;top:21px;left:35px;}
.upload p{color:#999}
.upload-now{-webkit-animation:spinAround 0.7s linear infinite;-moz-animation:spinAround 0.7s linear infinite;animation:spinAround 0.7s linear infinite;}
@-webkit-keyframes spinAround{
   from{-webkit-transform:rotate(0deg)}
   to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinAround{
   from{-moz-transform:rotate(0deg)}
   to{-moz-transform:rotate(360deg);}
}
@keyframes spinAround{
   from{transform:rotate(0deg)}
   to{transform:rotate(360deg);}
}

附图：