常用loading样式
程序员文章站
2022-07-14 10:44:34
...
//loding
.loding{
display: none;
.cover{
position:fixed;
z-index:99;
left:0;
bottom:0;
right:0;
top:0;
background-color: #ccc;
opacity: 0.5;
}
.loading-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
animation-duration: 1s;
animation-fill-mode: both;
z-index:120;
}
.loading-img {
margin: 0 auto;
width: 200px; /*no*/
height: 130px; /*no*/
background: url('//ceair-resource.oss-cn-shanghai.aliyuncs.com/common/pc/loading2.gif') no-repeat;
background-size: 100% auto;
}
}
html:
<!--loding-->
<div class="loding">
<div class="cover"></div>
<aside class="loading-wrapper">
<div>
<div class="loading-img"></div>
</div>
</aside>
</div>
上一篇: 微信小程序-显示loading的几种方式
下一篇: CSS 的loading特效