<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);
}