写个loading

image.png
image.png

// loading   
//调用 var a=Iloading('.xxx');  xxx可以是id名Iloading('#xx')  类名Iloading('.xx') 元素名Iloading('xxx')
//显示 a.show()  默认显示    
//隐藏 a.hide();
function Iloading(el,className){
    if(this instanceof Iloading){
        this.el=document.querySelector(el);
        this.className=className;
        this.init();
    }else{
        return new Iloading(el);
    }
}
Iloading.prototype={
    init:function(){
        this.addStyle();
        this.createElement();
    },
    addStyle:function(){
        // 添加全局样式
        var b=document;
        if (b.querySelectorAll("style.i_loading") && 0 >= b.querySelectorAll("style.i_loading").length) {
            var e = b.createElement("style");
            e.className = "i_loading";
            if(this.className){
                e.className+=" "+this.className;
            }
            var g = b.createTextNode(".i_loading_wrap .i_loading{position:relative;width:2.5em;height:2.5em;transform:rotate(165deg)}.i_loading_wrap .i_loading:after,.i_loading_wrap .i_loading:before{content:'';position:absolute;top:50%;left:50%;display:block;width:.5em;height:.5em;border-radius:.25em;transform:translate(-50%,-50%)}.i_loading_wrap .i_loading:before{animation:i_loading_before 2s infinite}.i_loading_wrap .i_loading:after{animation:i_loading_after 2s infinite}@keyframes i_loading_before{0%{width:.5em;box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}35%{width:2.5em;box-shadow:0 -.5em rgba(225,20,98,.75),0 .5em rgba(111,202,220,.75)}70%{width:.5em;box-shadow:-1em -.5em rgba(225,20,98,.75),1em .5em rgba(111,202,220,.75)}100%{box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}}@keyframes i_loading_after{0%{height:.5em;box-shadow:.5em 1em rgba(61,184,143,.75),-.5em -1em rgba(233,169,32,.75)}35%{height:2.5em;box-shadow:.5em 0 rgba(61,184,143,.75),-.5em 0 rgba(233,169,32,.75)}70%{height:.5em;box-shadow:.5em -1em rgba(61,184,143,.75),-.5em 1em rgba(233,169,32,.75)}100%{box-shadow:.5em 1em rgba(61,184,143,.75),-.5em -1em rgba(233,169,32,.75)}}.i_loading_wrap .i_loading{position:absolute;top:calc(50% - 1.25em);left:calc(50% - 1.25em);z-index:999999}.i_loading_wrap .i_loading_bg{background:rgba(0,0,0,.6);height:100%;width:100%;top:0;left:0;position:absolute;z-index:999998}.i_loading_wrap{position:relative}");
            e.appendChild(g);
            b.head.appendChild(e);
        }
        this.el.style.position="relactive";
        this.show();
    },
    createElement:function(){
        if(this.el.className.indexOf('i_load_')<0){
            this.el.className+=" i_load_";
            var b=document;
            var a = b.createElement("div");
            a.className = 'i_loading_bg';
            this.el.appendChild(a);
            var c = b.createElement("div");
            c.className = "i_loading";
            this.el.appendChild(c);
        }
    },
    show:function(){
        if(this.el.className.indexOf('i_loading_wrap')<0){
            this.el.className+=" i_loading_wrap";
        }
    },
    hide:function(){
        this.el.className=this.el.className.replace('i_loading_wrap','');
    }
}