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