頁(yè)面loading動(dòng)畫能夠更好的反應(yīng)當(dāng)前網(wǎng)頁(yè)的加載進(jìn)度情況，動(dòng)畫的形式從開(kāi)始0%到100%完成網(wǎng)頁(yè)加載這一過(guò)程可以給用戶一個(gè)溫馨的提示，用戶體驗(yàn)很不錯(cuò)。
loading動(dòng)畫的制作非常容易，難點(diǎn)在于如何判斷當(dāng)前頁(yè)面的加載進(jìn)度，目前沒(méi)有方法可以直接獲取正在加載對(duì)象的大小。所以我們無(wú)法通過(guò)數(shù)據(jù)大小來(lái)實(shí)現(xiàn)0-100%的加載顯示過(guò)程。
我們知道當(dāng)頁(yè)面加載時(shí)html代碼是逐行進(jìn)行加載的，因此我們可以通過(guò)這個(gè)特性來(lái)間接達(dá)到效果。
首先我們需要定義一個(gè)頁(yè)面的加載動(dòng)畫：
@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);}然后根據(jù)實(shí)際情況將當(dāng)前頁(yè)面分成若干份，然后插入相關(guān)節(jié)點(diǎn)如下：
<div class="div1"></div>$('.loading').animate({'width':'20%'});<div class="div2"></div>$('.loading').animate({'width':'40%'});<div class="div3"></div>$('.loading').animate({'width':'60%'}); ...最后在頁(yè)面的最底部讓loading動(dòng)畫達(dá)到100%并隱藏動(dòng)畫即可：
$('.loading').animate({'width':'100%'}).fadeOut();
