基于javascript实现页面加载loading动画

页面loading动画能够更好的反应当前网页的加载进度情况，动画的形式从开始0%到100%完成网页加载这一过程可以给用户一个温馨的提示，用户体验很不错。

loading动画的制作非常容易，难点在于如何判断当前页面的加载进度，目前没有方法可以直接获取正在加载对象的大小。所以我们无法通过数据大小来实现0-100%的加载显示过程。

我们知道当页面加载时html代码是逐行进行加载的，因此我们可以通过这个特性来间接达到效果。

首先我们需要定义一个页面的加载动画：

@mixin hover($value:.2s){-webkit-transition: all $value;-o-transition: all $value;-moz-transition: all $value;transition: all $value;}
.loading{width: 0;height: 2px;background: #f00;position: absolute;top: 0;left: 0;@include:hover(1s);}

然后根据实际情况将当前页面分成若干份，然后插入相关节点如下：

<div class="div1"></div>
$('.loading').animate({'width':'20%'});
<div class="div2"></div>
$('.loading').animate({'width':'40%'});
<div class="div3"></div>
$('.loading').animate({'width':'60%'});
...

最后在页面的最底部让loading动画达到100%并隐藏动画即可：

$('.loading').animate({'width':'100%'}).fadeOut();