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);} }
附图: