How to make progress bar with jQuery and PHP while waiting server process?

Question

It used to be easy to find solutions of my problem when Google gives many accurate results that point to Stackoverflow. But, I didn\'t found one for this problem. If any of

Answer 1

You can output javascript from your long running script:

while(doThings()) {
    echo '
<script> updateProgress("' . $x .'%");</script>';
    flush();
}

I personaly use bootstrap: http://getbootstrap.com/components/#progress

Answer 2

1. check Jquery Progress bar UI : http://jqueryui.com/progressbar/
2. use .getJSON or an ajax call every 10 seconds to call the server and check the progress
3. after you get the server progress update the UI

Explaining Step2

step 2 is generally based on your application flow, lets say for example i'm inserting 100,000 records in MYSQL, i would create another service that will check the rows count and the result were 30,000 records for example, that means the progress now is 30%, so if i call this service every 10 seconds i would get the current progress.