loading图片实现等待的动画

Css实现动画样式：
.refreshLoading-img
{ 
    width:50px; 
    height:50px;
    -webkit-animation:rotate 2s infinite linear; 
    animation: rotate 2s infinite linear;
}
@keyframes rotate
{ 
    0%{ transform:rotate(0deg); } 
   100%{ transform:rotate(360deg); }
}

 

html，jsp页面引入图片：
<div id="refreshLoadingDiv" 
style="display:none;position:absolute;
top:0px;left:0px;width:100%;height:100%;line-height:630px;
background-color:rgba(0,0,0,.2);
font-size:18px;color:#fff;z-index:99;" align="center"> 
<img class="refreshLoading-img" src="../assets/loading.png"> 正在加载
</div>

 

js代码：
$('#refreshLoadingDiv').css('display','block');//显示loading
setTimeout(function(){ //3000ms后隐藏 
    $('#refreshLoadingDiv').css('display','none');
},3000);

这里写的是关于旋转loading等待方式，引用的图片如下图

•