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等待方式,引用的图片如下图