How to show progress of jquery load

Question

I need something similar to this ->

How to show loading spinner in jQuery? since I also call the div content with jQuery .load() function.

But instead of showing picture, I would like to show progress bar. So I need to watch progress of that request.

Is it possible? How can I do that?

score 2 · Accepted Answer · answered May 07 '12 at 11:14

2

The example you gave uses only ajaxStart and ajaxReady, not any progress. As far as I know there is no way to determe the progress of the call via jQuery.

answered May 07 '12 at 11:14

George Boot

585
1
8
17

Yes I know there is no progress, that's why I asked if it is possible. Well than the picture has to be enough. – Oriesok Vlassky May 07 '12 at 11:17

Tats_innit · Answer 2 · 2017-08-21T01:48:18.080

Hiya DEMO ~~http://jsfiddle.net/5ZRfY/~~ ==> http://jsfiddle.net/je5qchss/

something like this perhaps. and please see here: http://api.jquery.com/ajaxComplete/ or http://api.jquery.com/ajaxSuccess/ and http://api.jquery.com/jQuery.ajax/ (have some good reads)

You can always put the call on start and stop when ajax finished successfully!

Jquery code

$(document).ready(function() {

    $('#progressBar').append('<div id="bar"></div>');

    // percentage of completion
    var progress = '100%';

    // Animate the #bar div
    $('#bar').animate({
        width: progress
    }, 400);

});

HTML

<div id='progressBar'></div>

css

body{
    background:#f6f6f6;    
}

/*Styling of progress bar container*/
#progressBar{
    width:300px;/*It is important to define the width of the progress bar*/
    height:40px;
    padding:0px;
    background:#ccc;
    border:1px solid #aaa;
    -moz-box-shadow: inset 0 0 3px #888;
    -webkit-box-shadow: inset 0 0 3px #888;
    box-shadow: inset 0 0 3px #888;
}
/*styling the progress bar*/

#bar{
    background:#499aed;
    height:100%; 
    width:0; /*sets the bar to 0*/   
}

this progress bar moves always 0.4 sec and shows nothing about real load — vladkras, Jan 13 '15 at 05:59

How to show progress of jquery load

2 Answers2