Loading页面加载代码

效果图

Js引用部分

<script>
document.body.innerHTML += ('<div id="preloader-body"><div id="cube-wrapper"><div class="cube-folding"><span class="leaf1"></span><span class="leaf2"></span><span class="leaf3"></span><span class="leaf4"></span></div>

<span class="loading"data-name="Loading">Loading</span></div>

</div>

');
//加载完隐藏
setTimeout(function () {
    document.getElementById('cube-wrapper').style.display = "none";
    document.getElementById('preloader-body').style.display = "none";
}, 2000);
</script>

Css

#preloader-body{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background-color:#fff;}
.cube-folding{display:inline-block;width:50px;height:50px;font-size:0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);-ms-transform:rotate(45deg);}
.cube-folding span{position:relative;display:inline-block;width:25px;height:25px;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);transform:scale(1.1);-ms-transform:scale(1.1);}
.cube-folding span::before{position:absolute;top:0;left:0;display:block;width:25px;height:25px;background-color:#007ee5;content:'';-webkit-transform-origin:100% 100%;-moz-transform-origin:100% 100%;transform-origin:100% 100%;-ms-transform-origin:100% 100%;-moz-animation:folding 2.5s infinite linear both;-webkit-animation:folding 2.5s infinite linear both;animation:folding 2.5s infinite linear both;}
.cube-folding .leaf2{-webkit-transform:rotateZ(90deg) scale(1.1);-moz-transform:rotateZ(90deg) scale(1.1);transform:rotateZ(90deg) scale(1.1);-ms-transform:rotateZ(90deg) scale(1.1);}
.cube-folding .leaf2::before{background-color:#34a4ff;-moz-animation-delay:.3s;-webkit-animation-delay:.3s;animation-delay:.3s;}
.cube-folding .leaf3{-webkit-transform:rotateZ(270deg) scale(1.1);-moz-transform:rotateZ(270deg) scale(1.1);transform:rotateZ(270deg) scale(1.1);-ms-transform:rotateZ(270deg) scale(1.1);}
.cube-folding .leaf3::before{background-color:#83c7ff;-moz-animation-delay:.9s;-webkit-animation-delay:.9s;animation-delay:.9s;}
.cube-folding .leaf4{-webkit-transform:rotateZ(180deg) scale(1.1);-moz-transform:rotateZ(180deg) scale(1.1);transform:rotateZ(180deg) scale(1.1);-ms-transform:rotateZ(180deg) scale(1.1);}
.cube-folding .leaf4::before{background-color:#5cb6ff;-moz-animation-delay:.6s;-webkit-animation-delay:.6s;animation-delay:.6s;}
@-moz-keyframes folding{0%,10%{opacity:0;-moz-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);}
25%,75%{opacity:1;-moz-transform:perspective(140px) rotateX(0);transform:perspective(140px) rotateX(0);}
100%,90%{opacity:0;-moz-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);}
}
@-webkit-keyframes folding{0%,10%{opacity:0;-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);}
25%,75%{opacity:1;-webkit-transform:perspective(140px) rotateX(0);transform:perspective(140px) rotateX(0);}
100%,90%{opacity:0;-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);}
}
@keyframes folding{0%,10%{opacity:0;-webkit-transform:perspective(140px) rotateX(-180deg);-moz-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);-ms-transform:perspective(140px) rotateX(-180deg);}
25%,75%{opacity:1;-webkit-transform:perspective(140px) rotateX(0);-moz-transform:perspective(140px) rotateX(0);transform:perspective(140px) rotateX(0);-ms-transform:perspective(140px) rotateX(0);}
100%,90%{opacity:0;-webkit-transform:perspective(140px) rotateY(180deg);-moz-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);-ms-transform:perspective(140px) rotateY(180deg);}
}
#cube-wrapper{position:fixed;top:50%;left:50%;margin-top:-50px;margin-left:-50px;width:100px;height:100px;text-align:center;}
#cube-wrapper:after{position:absolute;right:0;bottom:-20px;left:0;z-index:1;margin:auto;width:90px;height:6px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;background-color:rgba(0,0,0,.1);content:'';-webkit-filter:blur(2px);filter:blur(2px);-moz-animation:shadow .5s ease infinite alternate;-webkit-animation:shadow .5s ease infinite alternate;animation:shadow .5s ease infinite alternate;}
#cube-wrapper .loading{position:relative;top:25px;z-index:2;display:block;color:#007ee5;letter-spacing:.1em;font-size:12px;-moz-animation:text .5s ease infinite alternate;-webkit-animation:text .5s ease infinite alternate;animation:text .5s ease infinite alternate;}