weui 自定义 加载等待框缩略图
<div class="tip-dialog" >
			<div class="weui-mask"></div>
			<div class="loading-dialog">
				<div class="loading-dialog_bd">
					<img src="images/loading.png" >
					<p>请稍候,信息加载中...</p>
				</div>
				<div class="l-close"></div>
			</div>
		</div>


.v-close{
	background: url(../images/close.png) no-repeat;
	width: .19rem;
	height: .19rem;
	background-size: contain;
	position: absolute;
	right: .1rem;
	top: .2rem;
}
.loading-dialog{
	position: fixed;
	z-index: 5000;
	top: 50%;
	left: 50%;
	width: 2.45rem;
	padding: .3rem 0;
	margin-left: -1.225rem;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	background-image: linear-gradient(#2b2b2b , #171717);
	text-align: center;
	border-radius: 8px;
	overflow: hidden;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
}
.loading-dialog p{
	color: #8f8f8f;
	margin-top: 10px;
}
.loading-dialog img{
	width: .62rem;
	-webkit-animation: weuiLoading 1s steps(12,end) infinite;
	    animation: weuiLoading 1s steps(12,end) infinite;
}
.loading-dialog .l-close{
	background: url(../images/close12.png) no-repeat;
	background-size: contain;
	width: .12rem;
	height: .12rem;
	position: absolute;
	right: 10px;
	top: 10px;
}


.loading-icon{
	margin: 0 auto;
	width: 42px;
	height: 42px;
	
}

@-webkit-keyframes weuiLoading {
	0% {
		-webkit-transform: rotate3d(0, 0, 1, 0deg);
		transform: rotate3d(0, 0, 1, 0deg);
	}

	100% {
		-webkit-transform: rotate3d(0, 0, 1, 360deg);
		transform: rotate3d(0, 0, 1, 360deg);
	}
}

@keyframes weuiLoading {
	0% {
		-webkit-transform: rotate3d(0, 0, 1, 0deg);
		transform: rotate3d(0, 0, 1, 0deg);
	}

	100% {
		-webkit-transform: rotate3d(0, 0, 1, 360deg);
		transform: rotate3d(0, 0, 1, 360deg);
	}
}

.weui-mask {
	position: fixed;
	z-index: 100;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
}

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注