spin.js 动画加载（含数据交换）

html：

<script type="text/javascript" src="<%=basePath%>js/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="<%=basePath%>js/spin.js"></script>

<style type="text/css">

.w-load{

margin: 180px auto;

}

</style>

<div class="w-load"><div class="spin"></div></div>

Js：

$().ready(function() {

var cyry_id = '51010000266683';

var get_url = "rest/base/transpotCyryHandler/getCyryJsonById";//条件路径

var param = {'id':cyry_id};//参数

var ele = ".w-load";//div的className

var spinner = new Spinner({

lines: 13, // loading小块的数量

length: 8,// 小块的长度

width: 4,// 小块的长度

radius: 15,// 整个圆形的半径

corners: 2, // 小块的圆角，越大则越圆

color: '#333',// 颜色

speed: 1, // 变换速度

trail: 60,// 余晖的百分比

shadow: true,// 是否渲染出阴影

hwaccel: false, // 是否启用硬件加速

top: 'auto',// Top position relative to parent in px

left: 'auto'// Left position relative to parent in px

});

$(ele).show();//显示加载动画

var target = $(ele+' .spin')[0];

spinner.spin(target);

//获取后台数据

$.ajax({

contentType: "application/x-www-form-urlencoded; charset=utf-8",//编码

dataType:"json",//数据类型

async:true,//异步

data:param,

url: get_url,

success: function(data) {

if (data.hasError) {

alert(data.errorMessage);

} else {

//数据处理

}

},

complete:function(){

spinner.stop(); //用来停止loading

$(ele).hide();

}

});

});