spin.js 腳本壓縮后5k，可以不用任何圖片，任何外部的CSS樣式，就可以創建一個Ajax Loading 指示器，且兼容以下瀏覽器：
spin鏈接地址
http://spin.js.org/
在線演示地址
http://www.html5tricks.com/demo/jquery-loading-spin-js/index.html
我們可以在鏈接頁面中，動態設置樣式同時會自動生成樣式的配置腳本：
Spin.js 用法極其的簡單：
顯示 spinner
//target為顯示spiner的父容器
var target=document.getElementById("id")
spinner.spin(target);
隱藏 spinner
spinner.spin();
我們來做一個簡單完整的例子，來體驗一次吧：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax Loading Demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<!--原版壓縮spin.js-->
<script type="text/javascript" src="js/spin.min.js" ></script>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//opts 可從網站在線制作
var opts = {
lines: 13, // 花瓣數目
length: 20, // 花瓣長度
width: 10, // 花瓣寬度
radius: 30, // 花瓣距中心半徑
corners: 1, // 花瓣圓滑度 (0-1)
rotate: 0, // 花瓣旋轉角度
direction: 1, // 花瓣旋轉方向 1: 順時針, -1: 逆時針
color: '#5882FA', // 花瓣顏色
speed: 1, // 花瓣旋轉速度
trail: 60, // 花瓣旋轉時的拖影(百分比)
shadow: false, // 花瓣是否顯示陰影
hwaccel: false, //spinner 是否啟用硬件加速及高速旋轉
className: 'spinner', // spinner css 樣式名稱
zIndex: 2e9, // spinner的z軸 (默認是2000000000)
top: 'auto', // spinner 相對父容器Top定位 單位 px
left: 'auto'// spinner 相對父容器Left定位 單位 px
};
var spinner = new Spinner(opts);
$(document).ready(function () {
$("#btnRequest").bind("click", function () {
ajaxRequestData();
})
})
function ajaxRequestData(){
$.ajax({
type: "POST",
timeout: 10000,
dataType: "text",
url: "Index.ashx",
beforeSend: function () {
//異步請求時spinner出現
$("#firstDiv").text("");
var target = $("#firstDiv").get(0);
spinner.spin(target);
},
success: function (msg) {
$("#firstDiv").text(msg);
//關閉spinner
spinner.spin();
},
error: function (e, jqxhr, settings, exception) {
$("#firstDiv").text("請求發生錯誤...");
//關閉spinner
spinner.spin();
}
})
}
</script>
</head>
<body>
<div id="firstDiv">
</div>
<div id="secondDiv">
<input id="btnRequest" type="button" value="請求數據" class="btnStyle" />
</div>
</body>
</html>
點擊“請求數據”按鈕，效果如下圖所示：
