loading页面加载

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

}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值