web-dev-qa-db-fra.com

Comment animez-vous la valeur d'une barre de progression de l'interface utilisateur jQuery?

J'ai configuré une barre de progression de l'interface utilisateur jQuery mais je ne peux pas utiliser jQuery animate pour animer sa valeur. Des idées sur la façon de faire fonctionner cela?

La variable percentDone contient un nombre compris entre 0 et 100 indiquant la distance que doit parcourir la barre de défilement (cela fonctionne très bien).

J'ai essayé plusieurs choses en vain. Voici ce que j'ai jusqu'à présent:

var progressbar = $("#progressbar1").widget();

progressbar.animate({
    value: percentDone
}, 5000, function() {
    console.debug('done animating');
});

Notez que si je mets à jour la barre de défilement en utilisant la méthode "value" cela fonctionne très bien mais elle saute à cette valeur au lieu de l'animer en douceur:

$("#progressbar1").progressbar('value', percentDone);
jqueryjquery-uiscrollbarjquery-animate
35
Julian
$(function() {
    var pGress = setInterval(function() {
        var pVal = $('#progressbar').progressbar('option', 'value');
        var pCnt = !isNaN(pVal) ? (pVal + 1) : 1;
        if (pCnt > 100) {
            clearInterval(pGress);
        } else {
            $('#progressbar').progressbar({value: pCnt});
        }
    },10);
});
  • DEMO 2: : adaptation de la réponse de @ Peter ci-dessous pour le bien ;-).
$(function() {
    $('#progressbar').progressbar(); // inizializa progressbar widget
    $pVal = $('.ui-progressbar-value').addClass('ui-corner-right');
    var pGress = setInterval(function() { //generate our endless loop
        var pCnt = $pVal.width(); // get width as int
        // generate a random number between our max 100 and it's half 50, 
        // this is optional, and make the bar move back and forth before
        // we reach the end.
        var rDom = Math.floor(Math.random() * (100 - 50 + 1) + 50);
        var step = rDom >= 100 ? 100: rDom; // reached our max ? reset step.
        doAnim(step);
    },1000);
    var doAnim = function(wD) {
        // complete easing list http://jqueryui.com/demos/effect/easing.html
        $pVal.stop(true).animate({width: wD + '%'},1000, 'easeOutBounce');
        if (wD >= 100) clearInterval(pGress) /* run callbacks here */
    }
});

Dans une application réelle, vous n'aurez peut-être pas besoin de générer une boucle, par exemple, lors du téléchargement d'un fichier, votre application flash vous indiquera la taille du fichier et vous indiquera lorsque vous aurez atteint la valeur maximale requise, donc mon premier code est destiné à démontrer juste l'utilisation de la barre de progression setter et getter et bien sûr ce qui fait jouer le tout, c'est par exemple la boucle; le second est une adaptation du même concept au sucre.

59
Luca Filosofi

Animation avec CSS3

Avec CSS3, il n'est pas nécessaire d'utiliser JavaScript pour gérer directement la valeur de la barre de progression. Ajoutez simplement ceci à votre style:

.ui-progressbar-value {
  transition: width 0.5s;
  -webkit-transition: width 0.5s;
}

Vous pouvez en savoir plus sur Transitions CSS .

41
Mikhail

Voici comment l'animer en douceur, plutôt que la manière quelque peu saccadée suggérée dans la réponse actuellement acceptée de @aSeptik. Il contourne la méthode .progressbar('value, ...).

// On load, make the progressbar inside always have round edges:
// (This makes it look right when 100%, and seems nicer all the time to me.)
$("#progressbar .ui-progressbar-value").addClass("ui-corner-right");

new_width = "50px";  // you will need to calculate the necessary width yourself.
$("#progressbar .ui-progressbar-value").animate({width: new_width}, 'slow')
34
Peter

une très bonne solution sur le forum jquery

http://forum.jquery.com/topic/smooth-progressbar-animation

la barre de progression doit être initialisée avec disons 0,1 pour fonctionner

$("#progressbar .ui-progressbar-value").animate(
{
  width: "67%"
}, {queue: false});
11
fred_

A écrit ce plugin/méthode pour animer très facilement n'importe quelle barre de progression, et fonctionne très bien pour moi, donc j'espère que cela le fera pour tout le monde aussi.

(function( $ ) {
    $.fn.animate_progressbar = function(value,duration,easing,complete) {
        if (value == null)value = 0;
        if (duration == null)duration = 1000;
        if (easing == null)easing = 'swing';
        if (complete == null)complete = function(){};
        var progress = this.find('.ui-progressbar-value');
        progress.stop(true).animate({
            width: value + '%'
        },duration,easing,function(){
            if(value>=99.5){
                progress.addClass('ui-corner-right');
            } else {
                progress.removeClass('ui-corner-right');
            }
            complete();
        });
    }
})( jQuery );

Ajoutez simplement ce code en haut de votre page n'importe où et utilisez-le sur un élément en tant que tel

$('#progressbar').animate_progressbar(value [, duration] [, easing] [, complete] );

MODIFIER:

Voici une version réduite du code, qui le charge un peu plus rapidement.

(function(a){a.fn.animate_progressbar=function(d,e,f,b){if(d==null){d=0}if(e==null){e=1000}if(f==null){f="swing"}if(b==null){b=function(){}}var c=this.find(".ui-progressbar-value");c.stop(true).animate({width:d+"%"},e,f,function(){if(d>=99.5){c.addClass("ui-corner-right")}else{c.removeClass("ui-corner-right")}b()})}})(jQuery);
8
Brian Leishman

Voici une solution élégante: Barres de progression de Jquery croissantes

$(function() {
$("#progressbar").progressbar({
value: 1
});
$("#progressbar > .ui-progressbar-value").animate({
width: "37%"
}, 500);
});
3
Jake Smith

Le script suivant anime non seulement la barre de progression, mais augmente/diminue également les valeurs affichées% pas à pas

            // 'width' can be any number

               $('#progressbar .ui-progressbar-value').animate(
                {
                  width: width + '%'
                },
                {
                  duration: 3000,
                  step: function (now, fx) {
                      $('.leftvalue').html(parseInt(now) + '%');
                      $('.rightvalue').html((100 - parseInt(now)) + '%');
                  }
                });
1
pinkal vansia

vous pouvez le faire avec une simple progression native html5.
html:

<progress id="score-progress-bar" value="10" max="100"></progress>

js:

$('#score-progress-bar').animate({value: your_value_from_0_to_100}, {duration: time_in_ms, complete: function(){console.log('done!');}});
1
Sagiv Ofek