js spin 加载动画(loading)

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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。