欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

常用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