Javascript中的连续进度条

我试图找到创建一个简单进度条的最佳选择，我需要在另一个JavaScript脚本中定期触发该进度条

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

我正在尝试实现一个平滑的动画版本的酒吧，像这个：。（我试着改编了这个特别的版本，但我无法让它按照我描述的方式工作）

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

---

谢谢。

使用jQuery UI进度条可以很快完成这项工作，只需先调用它：

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

在您的另一个脚本中，可能通过

setInterval（）

：

这样把它放在一起：

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

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