progress animation with JQuery File Upload

I’m having issues getting the widget to work with JQuery File Upload.

The progress animation starts only once the file is done uploading (regardless if the file weights 1mo or 100mo) even though JQuery File Upload is set to update the progress value every 1 or 10ms (it works fine with regular progress bars). I’ve digged into every options (animation speed, disabling the animation…) but so far I haven’t been able to solve this.

$('#avatar-progress').circleProgress({
    value: 0,
    size: 156,
    fill: { color: "#60bcff" },
    emptyFill: "#ffffff",
    thickness: 2,
    startAngle: 3.8,
});

JQuery File Upload progress options :

progressInterval: 1,
dataType: 'json',
progress: function (e, data) {
    var progress = parseInt(data.loaded / data.total, 10);
    $('#avatar-progress').circleProgress('value', progress);
}

Any thoughts on this issue ? I’m really looking forward to be able to correctly implement this progress bar. Besides this, great script.

Thanks !

[kottenator]

Yes, the case is correct, that’s how it’s implemented right now and maybe it’s not the best way 😦

The circle remembers that the last animation was started at 100% and finished at 0 so when you redraw it - it replays the last animation.

To make it forget the last animation, you need to override animationStartValue:

// reset the circle
$('#avatar-progress').circleProgress({
  value: 0,
  animationStartValue: 0
});

After it’s reset, you can use $('#avatar-progress').circleProgress('value', ...) again, as usual

[apatikgg]

Allright I think i get it. What does (…) stand for however ?

Anyways I managed to get it work but as I thought I was finally done, something showed up.

processfail: function () {
    $('#avatar-progress').circleProgress({
                animation: { duration: 500 },
                fill: { color: "#dd3a3a" },
                animationStartValue: 0
            });
    $('#avatar-progress').circleProgress('value', 1);
    $('#avatar-progress').on('circle-animation-end', function() {
        var element = document.getElementById("avatar-progress");
        element.classList.add("avatar-pulse-error");
        setTimeout(function () {
            $('#avatar-progress').circleProgress('value', 0);
            setTimeout(function () {
                var element = document.getElementById("avatar-progress");
                element.removeAttribute("class");
                $('#avatar-progress').circleProgress({
                    animation: { duration: 10 },
                    fill: { color: "#60bcff" },
                    animationStartValue: 0
                });
            }, 500);
        }, 800);
    });
},

As you see I am using the code to run the second half of the script after the 0-100 has ended. It works very fine exept immediatly after this script is done, the part between

$('#avatar-progress').on('circle-animation-end', function() {
        // code for pulse effect
});

gets run again and again in an infinite loop of LSD effect pulse animation. Any idea why the script is doing loops ? It is supposed to run only once after the bar reaches 0->100

Thank you !