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

Question

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

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

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

Я изучаю пользовательский интерфейс jQuery 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)); 

Анимированный эффект сохраняет его немного более гладким король также: see here for a demo. Это делается с помощью одного правила CSS в демонстрационном случае:

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