頁面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();