loading加载中效果

 

 

(function(){
    try{
        var ui={
            loading:{
                addCssStyle:function(text) {
                    var head = document.getElementsByTagName('head')[0];
                    var node = document.createElement('style');
                    node.type = 'text/css';
                    head.appendChild(node);
                    node.innerHTML = text;
                    return node;
                },
                init:function(parent){
                    var html =' <div class="spinner">';
                    for(var i=0;i<12;i++){
                        html = html+ '<div class="bar'+(i+1)+'"></div>';
                    }
                    html = html+ '</div>';
                    if($(parent).find(".spinner").length == 0)
                    {
                        $(parent).append(html);
                        if($("#spinner").length == 0){
                            var css = ".spinner{width:30px;display:inline-block;position:relative}.spinner div{width:2px;height:4px;background-color:grey;position:absolute;opacity:0;-webkit-border-radius:60%;-webkit-animation:fade 1s linear infinite;top:-8px;left:10px}@-webkit-keyframes fade{from{opacity:1}to{opacity:.25}}";
                            for(var i=0;i<12;i++){
                                css = css + ".spinner div.bar"+(i+1)+"{-webkit-transform:rotate("+i*30+"deg) translate(0,-142%);-webkit-animation-delay:"+((0.0837*i-1))+"s}";
                            }
                            console.log(css);
                            this.addCssStyle(css);
                        }
                    }
                },
                show:function(parent){
                    this.init(parent);
                    $(parent).find(".spinner").show();
                },
                hide:function(parent){
                    $(parent).find(".spinner").hide();
                }
            }
        };
        window.Rui = ui;
    }catch(e){
        console.log(e);
    }
})();