Непрерывный индикатор прогресса в Javascript

Question

Я пытаюсь найти лучший вариант для создания простого индикатора выполнения, который мне нужно периодически запускать из другого скрипта JavaScript.

Каждые несколько минут таймер будет вызывать запуск индикатора выполнения.от 0 до 100%.Как только он достигнет 100%, бар будет сброшен до 0.

Я пытаюсь реализовать плавную анимированную версию бара, как этот: http://www.webappers.com/progressBar/. (я пытался адаптировать этот конкретный, ноЯ не мог заставить его работать так, как я описал)

Я смотрю в пользовательский интерфейс jQuery ProgressBar: возможно ли использовать его так, как я описал?

Спасибо.

Answer 1

Это довольно быстро сделать с индикатором выполнения пользовательского интерфейса jQuery, просто назовите его сначала:

$("#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); }