spin.js 完全自製的 JQuery Loading 動畫

平常見到的loading畫面都是使用gif 來製作動畫圖標，現在可以使用jquery來製作客製化的loading樣式囉 ! 無論是光暈長度、圓角、顏色、速度...等等都可以依據自己喜好來自定義 , 是不是很有趣呢? 先來看一下效果吧：

《各種自定義樣式》

          DEMO

spin.js 使用教學

第一步、網頁head帶入spin.js檔案以及jquery程式庫：

1. <script type="text/javascript" src="spin.min.js"></script>
   
2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

複製代碼

第二步、帶入spin function等自定義參數值 , 可以在官網網站的編輯器測試相關參數值喔：

1. $(function(){  
   
2. var opts = {
   
3.      lines: 13, // loading光暈長條的數量
   
4.      length: 7, // 光暈長條的長度
   
5.      width: 4, // 光暈長條的寬度
   
6.      radius: 10, // 整個圓形的半徑
   
7.      corners: 1, // 光暈長條的圓角
   
8.      rotate: 0, // loading動畫的旋展度數 (因為本身已經動態旋轉了所以這個沒什麼調整必要)
   
9.      color: '#000', // 顏色
   
10.      speed: 1, // 速度
    
11.      trail: 60, // 動作餘暉的百分比
    
12.      shadow: false, // 是否渲染出陰影
    
13.      hwaccel: false, // 是否啟用硬體加速
    
14.      className: 'spinner', // 給loading添加的class樣式名稱
    
15.      zIndex: 2e9, // z軸的層級 (預設2000000000)
    
16.      top: 'auto', // top相對定位
    
17.      left: 'auto' // left相對定位
    
18. };
    
19.    var target = document.getElementById('loading'); //loading為自定義ID要和HTML中的ID相同
    
20.     var spinner = new Spinner(opts).spin(target);
    
21. })

複製代碼

當上面function 部分定義完畢後 , html部分很簡單 , 只需要將DIV帶入剛剛最後定義的ID名稱 , 就可以將loading動畫效果帶入頁面中，例如：

1. <div id="loading"></div>

複製代碼

是不是很簡單呢～ 趕緊來動手試試看吧 :)

spin一款jq的loading效果.rar (7.45 KB, 下載次數: 62)

2013-6-1 02:13 上傳

點擊文件名下載附件
閱讀權限: 10