jQuery 漂亮的動畫讀取進度條

loader

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

外掛網址:
jQuery animation Percentage Loader plugin

引入外掛後先初始化
  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,改成塞真正的值進去。
  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

留言