phpjqueryajaxprogress-bar

Showing a progress wheel while page loads

I need a progress wheel to show while a lot of database and 3rd Party cURL queries are being made while the user waits.

Should the progress wheel show by itself right away, or should I show it once the page template (but not content) has loaded in?

Should I show a progress wheel until the page's HTML/javascript is done loading, or when the PHP is done loading?

If you could show in raw code how most people do this, that'd be great. I'm using jQuery and this is a PHP site.

Solution

  • show progress bar until, php response(returned value may be HTML one) is not loaded into javascript.

    "Should I show a progress wheel until the page's HTML/javascript is done loading, or when the PHP is done loading?"

    Yes to this Approach

    Once loading is complete, hide loading using jquery and put the content in to container class.

    <div class="loading"></div>
<div id="container"></div>

    $('.loading')
    .hide() // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
     });