最近做页面ajax加载是又用到loading动画，还好有一个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'

})

}

 

转自：