body里面加入
<div class="loading_wrap">
<div class="m-load2">
<div class="line">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="circlebg"></div>
</div>
</div>
css里面加入
/*加载中*/
.loading_wrap{
margin: auto;
width: 5rem;
height: 2.5rem;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
position: fixed;
background: #666666;
border-radius: .5rem;
top: 40%;
left: 50%;
margin-left: -2.5rem;
/* margin-top: -1.25rem; */
z-index: 55;
}
.m-load2{width:1.8rem;height:1.8rem;margin:.35rem auto;}
.m-load2{background:#666666;}
/** 加载动画的静态样式 **/
.m-load2{position:relative;}
.m-load2 .line div{position:absolute;left:.8rem;top:0;width:.15rem;height:1.8rem;}
.m-load2 .line div:before,.m-load2 .line div:after{content:'';display:block;height:50%;background:#fcfcfc;border-radius:.25rem;}
.m-load2 .line div:nth-child(2){-webkit-transform:rotate(30deg);}
.m-load2 .line div:nth-child(3){-webkit-transform:rotate(60deg);}
.m-load2 .line div:nth-child(4){-webkit-transform:rotate(90deg);}
.m-load2 .line div:nth-child(5){-webkit-transform:rotate(120deg);}
.m-load2 .line div:nth-child(6){-webkit-transform:rotate(150deg);}
.m-load2 .circlebg{position:absolute;left:50%;top:50%;width:.9rem;height:.9rem;margin:-.45rem 0 0 -.45rem;background:#666;border-radius:.9rem;}
/** 加载动画 **/
@-webkit-keyframes load{
0%{opacity:0;}
100%{opacity:1;}
}
.m-load2 .line div:nth-child(1):before{-webkit-animation:load 1s linear 0s infinite;}
.m-load2 .line div:nth-child(2):before{-webkit-animation:load 1s linear 0.1s infinite;}
.m-load2 .line div:nth-child(3):before{-webkit-animation:load 1s linear 0.2s infinite;}
.m-load2 .line div:nth-child(4):before{-webkit-animation:load 1s linear 0.3s infinite;}
.m-load2 .line div:nth-child(5):before{-webkit-animation:load 1s linear 0.4s infinite;}
.m-load2 .line div:nth-child(6):before{-webkit-animation:load 1s linear 0.5s infinite;}
.m-load2 .line div:nth-child(1):after{-webkit-animation:load 1s linear 0.6s infinite;}
.m-load2 .line div:nth-child(2):after{-webkit-animation:load 1s linear 0.7s infinite;}
.m-load2 .line div:nth-child(3):after{-webkit-animation:load 1s linear 0.8s infinite;}
.m-load2 .line
然后页面加载成功后,让div loading_wrap 隐藏
success: function (data) {
$(".loading_wrap").hide();
}