Spin.js 實際執行畫面

現在網頁設計上，常常都會使用到 AJAX 來做異步的存取，在作用當中想讓使用者知道在讀取中大部分的人都會使用到圖片。然而這一支程式的不是用圖片來完成這一個提示的動作，是使用 CSS3 來渲染使用者的介面，當瀏覽器不支援時會改採用 VML 的方式來產生。不需要圖片也沒有外部的 CSS 檔案，不依賴框架。相容於 IE6 以上版本，相當於相容於近代所有瀏覽器，檔案大小僅 4.11 KB 比一個 GIF 的動畫圖片還小。

使用方法：

第一步 載入程式所需要的檔案
<script src="spin.min.js "></script>

第二步 在HTML部分新增一個容器
<div id="MyID"></div>

第三步 使用 JavaScript 產生所需要的讀取中樣式
var opts = {
  lines: 17,
  length: 30,
  width: 4,
  radius: 40,
  corners: 1,
  rotate: 22,
  color: '#000',
  speed: 0.7,
  trail: 100,
  shadow: false
};
var target = document.getElementById('MyID');
var spinner = new Spinner(opts).spin(target);


附上可修改參數表格

參數	預設	說明
lines	12	圈圈由多少條線組成
length	7	每條線的長度
width	5	每條線的寬度
radius	10	內圓的半徑
rotate	0	旋轉的偏移量
corners	1	圓度
color	#000	線的顏色
speed	1	旋轉的速度.以秒為單位
trail	100	餘暉的百分比
opacity	1/4	不透明的線條透明度
fps	20	每秒執行的速度
zIndex	2e9	默認的 z-index 數值
className	spinner	CSS 類別名稱
top	auto	垂直置中
left	auto	水平置中
position	relative	顯示的位置
shadow	false	是否產生陰影
hwaccel	false	是否使用硬體加速

作者網站：http://fgnass.github.com/spin.js/
檔案大小：4.11 KB
檔案下載：http://fgnass.github.com/spin.js/dist/spin.min.js
檔案備份：下載