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