移动端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();