자바 스크립트의 연속 진행 표시 줄

Question

다른 JavaScript 스크립트 내에서 주기적으로 실행해야하는 간단한 진행률 표시 줄을 만드는 가장 좋은 옵션을 찾으려고합니다.

몇 분 간격으로 타이머를 사용하면 진행률 표시 줄이 0에서 100 %로 시작됩니다. 100 %에 도달하면 표시 줄은 0으로 재설정됩니다.

다음과 같이 바의 부드러운 애니메이션 버전을 구현하려고합니다 : http://www.webappers.com/progressBar/. (이 특정 하나를 적용하려고했지만 설명했던대로 작동하지 못했습니다.)

jQuery UI ProgressBar를 살펴 보았습니다. 설명 된대로 사용할 수 있습니까?

감사합니다.

이것은 jQuery를 UI 진행 표시 줄과는 꽤 빠른

Answer 1

, 단지 처음이 전화 :

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

그리고이 다른 스크립트에, 아마 setInterval()를 통해 :

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

함께 넣어 like :

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