Barre de progression continue en Javascript

Question

J'essaie de trouver la meilleure option pour créer une barre de progression simple que j'ai besoin d'être déclenchée périodiquement à partir d'un autre script JavaScript.

Toutes les quelques minutes, une minuterie faisait passer la barre de progression de 0 à 100%. Une fois qu'il atteint 100%, la barre serait réinitialisée à 0.

J'essaye d'implémenter une version animée lisse de la barre, comme celle-ci: http://www.webappers.com/progressBar/. (J'ai essayé d'adapter celui-ci mais je ne pouvais pas le faire fonctionner comme je l'ai décrit)

Je regarde dans l'interface utilisateur de jQuery ProgressBar: Est-il possible de l'utiliser de la manière que j'ai décrite?

Merci.

Answer 1

Ceci est assez rapide à faire avec la barre de progression jQuery UI, il suffit d'appeler ce départ:

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

Et dans votre autre scénario, probablement via setInterval():

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

Associez- comme ceci:

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

L'effet d'animation, il garde un peu plus lisse Loo roi ainsi: see here for a demo. Cela se fait via une seule règle CSS, dans le cas de démonstration:

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