Javascript中的持续进度条

我正在尝试找到创建简单进度条的最佳选项，我需要定期从另一个JavaScript脚本中触发。

每隔几分钟，一个计时器会使进度条从0到100％开始。 一旦达到100％，条形将重置为0。

我正在尝试实现一个流畅的动画版本，如下所示： http ： //www.webappers.com/progressBar/ 。 （我试着改编这个特别的但我无法按照我描述的方式工作）

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

谢谢。

Answer 1

使用jQuery UI进度条可以很快完成，最初只需调用它：

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

这可能在你的另一个脚本中，可能是通过setInterval() ：

 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)); 

动画效果让它看起来更平滑： 看这里的演示 。 在演示案例中，这是通过单个CSS规则完成的：

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