移动端通用遮罩层

遮罩层

<link rel="stylesheet" href="//at.alicdn.com/t/font_468714_r2clynau45fxn7b9.css">

<style type="text/css">

.loading{

position: fixed;

top: 0;

background: rgba(0,0,0,.5);

height: 100%;

width: 100%;

display: none;

}

@keyframes btnRotate {

0% {

-webkit-transform: rotateZ(0deg);

}

100% {

-webkit-transform: rotateZ(360deg);

}

}

@-webkit-keyframes btnRotate {

0% {

-webkit-transform: rotateZ(0deg);

}

100% {

-webkit-transform: rotateZ(360deg);

}

}

.loading>i {

font-size: 46px;

color: #FFF;

display: inline-block;

position: fixed;

top: 40%;

left: 50%;

margin-left: -30px;

margin-top: -30px;

transform-origin:50% 50%;

animation:btnRotate 2s linear infinite;

-webkit-animation:btnRotate 2s linear infinite;

}

.laod_text{

position: fixed;

top: 34%;

left: 40%;

margin-left: -30px;

margin-top: -30px;

transform-origin: 50% 50%;

color: white;

}

</style>

<!--body中  随便放个位置-->

<div class="loading"><i class="iconfont icon-loading"></i><div class="laod_text">提交中，请稍后！</div>

<!--JS-->

$(".loading").show();

$(".loading").hide();