JavaScript开发页面加载动画插件

我们在加载一些比较大的网页的时候，经常网卡的等原因，加载很慢，这个时候网站页面是空白或者不完整的，那么我们需要一种加载动画来改善用户体验。
下面我们就开始插件的开发，直接上代码，代码有详细注释。
代码：

/*页面加载logo动画插件*/
;(function (w, undefined) {
    /*创建样式*/
    var style = w.document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = "@keyframes lds-ripple{0%{top:94px;left:94px;width:0;height:0;opacity:1}100%{top:17px;left:17px;width:154px;height:154px;opacity:0}}@-webkit-keyframes lds-ripple{0%{top:94px;left:94px;width:0;height:0;opacity:1}100%{top:17px;left:17px;width:154px;height:154px;opacity:0}}.lds-ripple div{box-sizing:content-box;position:absolute;border-width:6px;border-style:solid;opacity:1;border-radius:50%;-webkit-animation:lds-ripple 1s cubic-bezier(0,0.2,0.8,1) infinite;animation:lds-ripple 1s cubic-bezier(0,0.2,0.8,1) infinite}.lds-ripple div:nth-child(1){border-color:#36f}.lds-ripple div:nth-child(2){border-color:#c90;-webkit-animation-delay:-0.5s;animation-delay:-0.5s}.lds-ripple{width:200px!important;height:200px!important;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#vj-loading{width:100%;height:100%;position:absolute;left:0;top:0;background-color:rgba(0,0,0,.4)}";
    /*创建根div节点*/
    var root = w.document.createElement('div');
    root.setAttribute('id', 'vj-loading');
    /*将样式节点加入根节点*/
    root.appendChild(style);
    /*创建加载动画div*/
    var ripple = w.document.createElement('div');
    /*添加class样式*/
    ripple.classList.add('lds-ripple');
    /*添加两个div节点*/
    ripple.appendChild(w.document.createElement('div'));
    ripple.appendChild(w.document.createElement('div'));
    /*将ripple节点添加到根节点*/
    root.appendChild(ripple);
    /*将根节点添加到body中*/
    w.document.body.appendChild(root);
    /*监听页面加载事件*/
    w.document.onreadystatechange = function () {
        if (w.document.readyState === 'complete') {
            w.document.body.removeChild(root);
        }
    }
})(window);

注意：该文件最好引入在body标签开头效果最佳，切记不要在head中引入，因为那个时候还检测不到body节点。
到此，插件开发完毕，想要在那个页面使用就引入该js文件吧。