How can I make AJAX animate my progress bar?

Question

I have a PHP page that shows 1%...2%.....3%..... etc. with an output buffer.

How can I get ajax to detect these changes and make them reflect in the progress bar's width CSS property?

$.ajax({
        type: "POST",
       url: "iopio.php",
       success: function(html){ 

         if (html != '100%') {

            $('#mainBar').animate({width:html});
            $('#status').text("Working.");

         }
        }



    });

please refer to: http://stackoverflow.com/questions/3901495/what-is-the-best-way-of-showing-progress-on-an-ajax-call it's basically the same thing, regarding the animation - the animate call is correct if you're using the technique in the link above. — bugkiller, Mar 03 '14 at 11:25

longstaff · Answer 1 · 2014-03-03T13:44:27.530

What you are doing is reading the content once, therefore you will get back a static answer every time, with this technique you would want to set up a looped ping event to keep updating, something like this:

function pingProgress(){

    $.ajax({
        type: "POST",
        url: "iopio.php",
        success: function(html){ 

            if (html != '100%') {
                $('#mainBar').animate({width:html});
                $('#status').text("Working.");

                pingProgress();
            }
        }

    });

}
//Start loop
pingProgress();

This specifically loops the call function until 100% is reached. To save data you might consider adding a timeout function etc.

You have to run pingProgress() somewhere to start the loop, now added — longstaff, Mar 03 '14 at 13:43

How can I make AJAX animate my progress bar?

1 Answers1