js spin 加载动画

最近做页面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'
})
}