JS

//获取浏览器页面可见高度和宽度
var _PageHeight = document.documentElement.clientHeight;
var _PageWidth = document.documentElement.clientWidth;
//计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）
//var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0;
//var _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
//在页面未加载完毕之前显示的loading Html自定义内容
var _LoadingHtml = '<div id="loadingDiv" style="height:' + _PageHeight + 'px;background:#fff;"><div class="spinner"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div></div></div>';
//呈现loading效果
document.write(_LoadingHtml);
//监听加载状态改变
document.onreadystatechange = completeLoading;
//加载状态为complete时移除loading效果
function completeLoading() {
    if (document.readyState == "complete") {
        var loadingMask = document.getElementById('loadingDiv');
        //loadingMask.parentNode.removeChild(loadingMask);
        setTimeout(function(){loadingMask.parentNode.removeChild(loadingMask)},500);
    }
}

CSS

#loadingDivs {position:absolute;left:0;width:100%;top:0;opacity:1;filter:alpha(opacity=80);z-index:10000;}
.spinner{margin:auto;width:80px;height:80px;left:0; right:0; top:0; bottom:0;position:fixed;}
.container1>div,.container2>div,.container3>div{width:20px;height:20px;background-color:#1abc9c;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.spinner .spinner-container{position:absolute;width:100%;height:100%}
.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}
.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}
.circle1{top:0;left:0}
.circle2{top:0;right:0}
.circle3{right:0;bottom:0}
.circle4{left:0;bottom:0}
.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
.container3 .circle1{-webkit-animation-delay:-1s;animation-delay:-1s}
.container1 .circle2{-webkit-animation-delay:-.9s;animation-delay:-.9s}
.container2 .circle2{-webkit-animation-delay:-.8s;animation-delay:-.8s}
.container3 .circle2{-webkit-animation-delay:-.7s;animation-delay:-.7s}
.container1 .circle3{-webkit-animation-delay:-.6s;animation-delay:-.6s}
.container2 .circle3{-webkit-animation-delay:-.5s;animation-delay:-.5s}
.container3 .circle3{-webkit-animation-delay:-.4s;animation-delay:-.4s}
.container1 .circle4{-webkit-animation-delay:-.3s;animation-delay:-.3s}
.container2 .circle4{-webkit-animation-delay:-.2s;animation-delay:-.2s}
.container3 .circle4{-webkit-animation-delay:-.1s;animation-delay:-.1s}
@-webkit-keyframes bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}
40%{-webkit-transform:scale(1)}
}
@keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}
40%{transform:scale(1);-webkit-transform:scale(1)}
}