jQuery 漂亮的動畫讀取進度條

想要一個漂亮的loading頁面嗎? 可以用用這個plugin

外掛網址：
jQuery animation Percentage Loader plugin

引入外掛後先初始化

view plaincopy to clipboardprint

1. var $topLoader = $("#topLoader").percentageLoader({width: 256, height: 256, controllable : true, progress : 0.5, onProgressUpdate : function(val) {   
2. $topLoader.setValue(Math.round(val * 100.0));   
3. }});  

範例是按了按鈕開始跑，可以參考code，改成塞真正的值進去。

view plaincopy to clipboardprint

1. var topLoaderRunning = false;   
2. $("#animateButton").click(function() {   
3.     if (topLoaderRunning) {   
4.         return;   
5.     }   
6.     topLoaderRunning = true;   
7.     $topLoader.setProgress(0);   
8.     $topLoader.setValue('0kb');   
9.     var kb = 0;   
10.     var totalKb = 999;   
11.                
12.     var animateFunc = function() {   
13.     kb += 17;   
14.     $topLoader.setProgress(kb / totalKb);   
15.     $topLoader.setValue(kb.toString() + 'kb');   
16.                  
17.     if (kb < totalKb) {   
18.         setTimeout(animateFunc, 25);   
19.     } else {   
20.         topLoaderRunning = false;   
21.     }   
22. }  

Demo