1.先看看效果图:
2.点击该刷新按钮通常会发送一下ajax请求,待到$(document).ajaxStop()。再移除该动画效果即可
<div class="flash">
<img src="./flash_icon.png" alt="flash"/>
</div>
CSS:
.flash{
width:30px;
height:30px;
position:fixed;
bottom:150px;
right:50px;
}
.flash img{
width:30px;
height:30px;
}
@keyframes flash-rotate{
0% {}
100% {-webkit-transform:rotate(360deg);}
}
.animation-rotate{
-webkit-animation-name:flash-rotate;
-webkit-animation-duration:0.8s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
}
JS:
$(".flash").click(function(){
$(this).addClass("animation-rotate");
//begin a request here
});