js+css实现全局loading加载

js

var Mask = function() {   //定义一个Mask对象
this.btn = ["取消", "确定"],
this.init = function(){
},
this.open = function(html){
$("body").append(html);
$("html,body").css("overflow", "hidden");
this.init();
},
this.close = function() {
$(".mask").hide();
$("html,body").css("overflow", "auto");
}
};
Mask.prototype.loding = function(msg){//给Mask的原型上加一个loading的方法
var _this = this;
var html = '<div class="toast_loading"><img src="./imges/loadinig.png" class="aniLoad"> <p style="line-height:1;">正在加载中…</p ></div>';
setTimeout(function (){
$('.toast_loading').hide();
},1000);
_this.open(html); }

css

.toast_loading {
width: 1.28rem;
height: 1.28rem;
border-radius: 4px;
background: rgba(0, 0, 0, .6);
position: fixed;
top: 50%;
left: 50%;
margin-left: -0.6rem;
margin-top: -0.6rem;
z-index: 100;
overflow: hidden;
color: #fff;
text-align: center;
} .toast_loading img{
transform-origin: 50% 50%;
transform: rotate(0deg);
animation: carMove 1.5s infinite;
-webkit-animation: carMove 1.5s infinite;
} @keyframes carMove {
0% {
transform: rotate3D(0, 0, 1, 0deg);
}
to {
transform: rotate3D(0, 0, 1, 360deg);
}
} @-webkit-keyframes carMove {
0% {
-webkit-transform: rotate3D(0, 0, 1, 0deg);
}
to {
-webkit-transform: rotate3D(0, 0, 1, 360deg);
}
}

使用方法

        Mask.loding();

文章来源地址https://www.yii666.com/article/764025.html文章地址https://www.yii666.com/article/764025.html网址:yii666.com<网址:yii666.com文章来源地址:https://www.yii666.com/article/764025.html

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png