css
<style>
.quan-loading {
position: fixed;
z-index: 1000;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,0.5);
}
.quan-loading img {
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin-left: -30px;
margin-top: -30px;
animation: changeright 2s linear infinite;
}
@-moz-keyframes changeright {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-ms-keyframes changeright {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-o-keyframes changeright {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes changeright {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes changeright {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
.coupon-loading {
height: 50px;
width: 100%;
text-align: center;
padding: 50px 0
}
.coupon-loading img {
width: 60rpx;
height: 60rpx;
vertical-align: middle;
animation: changeright 2s linear infinite;
}
@-moz-keyframes changeright {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-ms-keyframes changeright {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-o-keyframes changeright {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes changeright {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes changeright {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
HTML
<div class="quan-loading" style="display: none">
<img src="https://i-blog.csdnimg.cn/blog_migrate/c3b3f904f6a2fa7d6d6377987ab8fc6b.gif" alt="" width="60px" height="60px">
</div>
javascript
$('.quan-loading').show();
$('.quan-loading').hide();