这个效果的初衷是实现类似app端数据加载完成前的动画，但是实际上用途很广泛，就比如一些页面很庞大的网站加载完成需要很久时间，让用户看着白色屏幕干等着绝对不是办法，如果给一个网页加载完成前的动画显示，在一定程度上能够留住用户。一般来说很多网页都是通过ajax来请求数据，这样情况下对于判断页面是否加载完成则由ajax请求的反馈来做最终决定，甚至可以实时的确认进度，然而现实在于很多网页没有用ajax，所以也根本不需要太复杂的操作。
以下是我在类似app布局的网站上实现的效果代码。

首先定义HTML代码：

<div class="load">
    <div class="load_main">
        <i class="fa fa-spinner fa-spin"></i>
    </div>
</div>

这里引入了Font Awesome图标字体库的旋转效果，其实也可以用过css3或者js自己写旋转，我这里主要节约时间。

再写点css定义样式：

.load{width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:999;
background:#fff;}
.load_main{width:100%;
height:40px;
position:absolute;
top:40%;
text-align:center;
font-size:60px;}
.load_main i{color:#1f8abf}

这些css定义一个全屏覆盖的加载层，并且置于顶部，设置白色背景和蓝色的旋转小球。设置居中并且处于屏幕相对来说中心的位置。

然后写js代码，注意需要引入jquery：

$(window).load(function() {
   $(".load").fadeOut(500);
})

其实对于jQuery常用的新版本，代码应该为：

$(document).ready(function(){
   $(".load").fadeOut(500);
})

这句话其实意思就是判断页面是否加载完成，如果完成则在0.5秒内逐渐隐藏load层。

最终效果如下：