Spin.js-CSS動畫進度載入器

標籤：3.1   direct   名稱   陰影   數組   逆時針   http   div   androi   

spin.js是一款很easy的CSS載入器，他是一款使用了VML（Vector Makeup Language）的CSS動畫效果。

spin.js的特性

他有著很強大的適應性。有著下面幾個特性：

1.    沒有額外的圖片。也沒有添加的外部CSS檔案

2.    不須要依賴於其它工具，對於jQuery而言，它支援jQuery，可是jQuery並不是必須的

3.    有非常高的可配置性

4.    與解析度無關

5.    瀏覽器安全色性非常好，在低版本號碼的IE上。採用VML支援

6.    使用了@keyframe動畫。在不支援@keyframe的瀏覽器上，使用setTimeout()

7.    支援全部的主流瀏覽器。包含IE6

spin.js的使用

spin.js動態建立進度條。而且是圓圈進度動畫，它的高配置表如今能夠配置顏色。放射線的寬度和長度，旋轉是逆時針還是順時針，還有旋轉的速度。你能夠設定一個數組，來儲存這個進度條的屬性：

1.    var opts={

2.    lines:11, //圓圈中線條的數量

3.    length: 29, //每條線的長度

4.    width: 10, //每條線的寬度

5.    radius: 30, //每條線的圓角半徑

6.    corners: 1, //角落圓度，從0到1

7.    rotate: 0, //旋轉位移量

8.    direction: 1, //旋轉方向，當中1表示順時針。0表示逆時針

9.    color: ‘#FFF‘, //顏色

10.  speed: 1, //旋轉速率，單位為轉速/秒

11.  trail: 60, //餘暉的百分比，即顏色變化的百分比

12.  shadow: false, //是否顯示陰影

13.  hwaccel: false, //是否使用硬體加速

14.  className: ‘spinner‘, //綁定到spinner上的class名稱

15.  zIndex: 2e9, //定位層，預設值是2000000000

16.  top: ‘auto‘, //相對父元素的向上定位，單位是px

17.  left: ‘auto‘ //相對父元素的向左定位，單位是px

18.  };

然後結合jQuery使用spin.js很easy，僅僅須要在選定的元素上，使用spin()方法就能夠了。將上面設定的設定作為參數傳入：

1.    $("#loading").spin(opts);

停止載入動畫效果也很easy。僅僅須要將false作為參數傳入spin方法就能夠：

1.    $("#loading").spin(false);

而針對jQuery，spin.js還提供了更為簡單的設定，能夠傳入tiny，small，large來簡單設定圓圈的大小，其預設的設定中，圓圈的線條是9根。每條線的長度是10px。寬20px。對於tiny。small。large的設定例如以下：

·       tiny: {lines: 8, length: 2, width: 2, radius: 3 }

·       small: {lines: 8, length: 4, width: 3, radius: 5 }

·       large: {lines: 10, length: 8, width: 4, radius: 8 } 

spin.js的瀏覽器支援

spin.js支援全部的主流瀏覽器，當中包含：

·       Chrome

·       Safari3.2+

·       Firefox3.5+

·       IE6,7,8,9

·       Opera10.6+

·       MobileSafari (iOS 3.1+)

·       Android2.3+

spin.js的示範

在本文中的示範範例，大家在示範中能夠看到旋轉的進度條，而當你點擊在進度條上面的時候。代碼通過傳入false參數。將進度條停止並隱藏。

其它示範和庫檔案下載，請參見IT線上教育平台——麥子學院

不論什麼問題，能夠聯絡我~

 

Spin.js-CSS動畫進度載入器