最近做頁面ajax加載是又用到loading動畫，還好有一個spin.js
具體的包大家可以去http://fgnass.github.com/spin.js/下載，
如果想在頁面里出現loading動畫，大家只要這么做就可以了
首先頁面里要有：<div class="w-load"><div class="spin"></div></div>
一定要有一個包含.spin的標簽，然后調用 灑家 定義的function,就可以了
如： smallLoadingIcon('.w-load');
具體的loading大小形狀,可以自行調節。
function smallLoadingIcon(ele) { //小的loading圖標
var spinner = new Spinner({
lines: 12,
length: 5,
width: 2,
radius: 4,
color: '#333',
speed: 1,
trail: 50,
shadow: false,
hwaccel: false,
className: 'spinner',
top: 0,
left: 0
});
var target = $(ele+' .spin')[0];
spinner.spin(target);
return spinner;
}
2.///////////////
這個函數的作用是ajax調用開始前 出現loading圖標，數據加載完成后loading圖標消失，
function loadAjaxSpin(ele, get_url, callback){ //第一個參數為loading圖標加載的標簽，第二個為ajax的數據接口，第三個為回調函數。
var spinner = new Spinner({
lines: 10,
length: 3,
width: 2,
radius: 4,
color: '#333',
speed: 1,
trail: 38,
shadow: false,
hwaccel: true,
className: 'spinner',
top: 'auto',
left: 'auto'
});
$(ele).show();
var target = $(ele+' .spin')[0];
spinner.spin(target);
$.ajax({
url: get_url,
success: function (data) {
callback(data);
},
complete:function(){
spinner.stop(); //用來停止loading
$(ele).hide();
},
dataType: 'json'
})
}
轉自：http://www.cnblogs.com/yingcaiyi/archive/2012/11/02/2750803.html