常用loading样式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_38747509/article/details/83415409

//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>