方案一

<div class="div_uploading">

<div class="div_uploading_scroll"></div>

<div class="div_uploading_content"></div>

</div>

 

CSS样式

@keyframes scroll

{

0% {transform:rotate(0deg);}

100% {transform:rotate(360deg);}

}

.div_uploading

{

width:150px;

height:150px;

z-index:10001;

position:absolute;

top:40%;

left:40%;

}

.div_uploading_scroll

{

width:185px;

height:185px;

background:url(../../image/book/uploading1.png);

position: absolute;

border-radius: 185px;

left: 0;

top: 0;

animation:scroll 2s infinite linear;

}

.div_uploading_content

{

width: 113px;

height: 113px;

background: url(../../image/book/uploading2.png);

position: absolute;

border-radius: 113px;

top: 35px;

left: 35px;

}

 

 

方案二

<div class="uploadimg">

上传中...

</div>

CSS

.uploadimg

{

width:120px;

height:120px;

background:url(../../image/book/uploading3.png);

position:absolute;

top:50%;

left:50%;

margin-left:-180px;

margin-top:-95px;

text-align:center;

line-height:120px;

color:#fff;

display:none;

z-index:10001;

}

 

JS

var index;

function uoloading() {

index = 0;

this.st = window.setInterval(function(){

var x = index%6;

var y = parseInt(index/6)

$(".uploadimg").css({"background-position":-x*120+"px "+ -y*120+"px"});

index ++;

index = index==36 ? 0 : index;

},80);

}