How to make real progress bar of jQuery Ajax load request?

Question

What I need is an animated progress bar (like the one on youtube) BUT please no plugins!

My ajax request looks like this:

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        //Download progress
        xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                console.log(evt);
                var percentComplete = evt.loaded / evt.total * 100;
                //Do something with download progress
                // this is a static animation but i'm not able to make it work with the precentComplete that i have.
                $({
                    property: 0
                }).animate({
                    property: 105
                }, {
                    duration: 4000,
                    step: function() {
                        var _percent = Math.round(this.property);
                        $('#progress').css('width', _percent + "%");
                        if (_percent == 105) {
                            $("#progress").addClass("done");
                        }
                    },
                    complete: function() {
                        alert('complete');
                    }
                });
            }
        }, false);
        return xhr;
    },
    type: method,
    url: rest_api,
    headers: headers,
    timeout: 10000,
    dataType: 'json',
    data: http_content,
    beforeSend: function(xhr) {
        // do stuff
    },
    success: function(data, status, xhr) {
        // do stuff
    },
    error: function(xhr, e) {
        // do stuff
    }
});

So, I have an animation already made but I could not link it to be real, this is a static animation but I'm not able to make it work with the precentComplete that I have in the progress event.

Any ideas please? I need more clarification on this XHR2 with working snippet or example for better understanding.

The animation looks like this :jsFiddle

I'm not sure exactly what you want the progress to be but the progress of an xhr request is the progress of sending the data (upload). So this really only works on large input. For small input it just jumps to 100% straight away. — Halcyon, Jun 23 '15 at 15:19
What i want is the progress for Download data not upload, like the `youtube` something until it fetches the data via AJAX. — Abude, Jun 23 '15 at 15:21

score 2 · Answer 1 · edited May 23 '17 at 10:26

2

My first shot would be to define the progress bar outside the 'progress' event handler, and then only set the width property from within the event handler.

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        var progressBar = $("#progress");

        //Download progress
        xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                console.log(evt);
                var percentComplete = /* compute it */;
                progressBar.style("width", percentComplete + "%");
            }
        }, false);
        return xhr;
    },
    ...
});

It seems not every browser allows you to track download progress that easy, you can find more info on how to actually calculate the progress here: AJAX Page Download progress

edited May 23 '17 at 10:26

Community

1
1

answered Jun 23 '15 at 15:29

lordvlad

5,200
1
24
44

it's not animated, and as i get from the code it changes the width one time, when it's 100%, at least this is what i'm getting when i try the above code... and AJAX with XHR can get the progress track : http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/ , but i just don't get how to implement the animation with that percentage as i need time for animation ... – Abude Jun 23 '15 at 15:41
your css styles provide the animation, just set the width, and it will be animated. Check out the updated fiddle: http://jsfiddle.net/bgb9mj36/1/ – lordvlad Jun 23 '15 at 15:52
If it seems to change instantly, check your `progress` events. Maybe you only get a single event upon completion? Or you may want to increase the transition time in your css. – lordvlad Jun 23 '15 at 15:54
i don't actually know, that's why i'm asking on stack ... i saw a lot of plugins to do that but i want a plain code ... – Abude Jun 24 '15 at 06:43
1

Updated fiddle: http://jsfiddle.net/bgb9mj36/4/. Instead of displaying the events in the div `#events` you can show them in the console. Anyway, this fiddle should list all progress events and whether the progress can be computed for them. In the fiddle, its not the case, because the downloaded file is just too small and the XHR is done in an instant. I've updated the code a bit so that you will see some animation nevertheless. – lordvlad Jun 24 '15 at 07:14
Thanks for the modifications, but i'm still getting maximum two events, so the animation kind of stuck on 10% and after that is 100%. i've also added timeout on the server side to give me the JSON with a delay so i have more events and more animation but it still stuck on 10% and after that the animation is done, why i can't get a live progress while it's progressing? – Abude Jun 24 '15 at 08:02
Timeout does not give you more progress events, it just postpones them. If you don't have proper progress events, all you can do is to fake the progress on the client side. How to send proper progress notifications is another question – lordvlad Jun 24 '15 at 08:33
Ok sure, but just explain to me the theory why do i have only two events, is it the start and done events? so the progress is not real after all ? is there any kind of way to make a real progress bar after all ? Thanks a lot! – Abude Jun 24 '15 at 08:49
Because the downloaded file is just too small? Like in the fiddle, the answer is loaded in an instant, it would be a waste of resources to fire 100 progress events for something that is already there. For large files the setup should work though, and for small files you simply have to fake it. – lordvlad Jun 24 '15 at 10:40

How to make real progress bar of jQuery Ajax load request?

1 Answers1