Javascript中的持續進度條

Question

我正試圖找到最佳選項來創建一個簡單的進度條，我需要從另一個JavaScript腳本中定期觸發。

每隔幾分鐘，一個計時器就會使進度條開始從0到100％。一旦它達到100％，酒吧將重置爲0.

我想實現一個平滑的動畫版本的酒吧，就像這樣：http://www.webappers.com/progressBar/。 （我嘗試調整這個特定的一個，但我無法按照我描述的方式使它工作）

我正在研究jQuery UI ProgressBar：是否可以按我描述的方式使用它？

謝謝。通過setInterval()

$("#progressbar").progressbar({ value: 0 }); 

而這在其他腳本，大概是：：

Answer 1

這是相當快與jQuery UI的進度條做的，只是最初稱這

var percentComplete = 40; //Get the percent 
$("#progressbar").progressbar({ value: percentComplete }); 

把它放在一起像這樣：

var percentComplete = 0; //Update this in your other script 
$("#progressbar").data("progress", setInterval(function() { 
    if(percentComplete == 100) { 
    percentComplete = 0; 
    clearInterval($("#progressbar").data("progress")); //Stop updating 
    } 
    $("#progressbar").progressbar({ value: percentComplete }); 
}, 200)); 

動畫效果使它更平滑國王也是如此：see here for a demo。這是通過單個CSS規則在演示案例中完成的：

.ui-progressbar-value { background-image: url(images/pbar-ani.gif); }