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();
}
});
});