JQuery: Showing a progress image while processing background task

I thought to write a simple example to show a progress bar or a gif image showing a that a task is happening at the background using a jquery function.

i) Include jquery script file in the header section and the following code in the head

<script language="javascript">
$(document).ready(function(){
    $('#progress').hide();
    $("#main a.bgdiv").click(function(){
        $("#progress").show("slow");
        $("body").load($(this).attr('href'));
        return false;
    });
});
</script>


ii) The following html code comes in the body

<div id="progress">
  <img src="progress-rotator.gif">
</div>
<div id="main">
   <a href="link-to-file-for-background-process.php" class="bgdiv">Click here for MySQL Backup</a> 
</div>

NOTE: In JQuery, when the click action is initiated by clicking “Click here for MySQL Backup” it will NOT link to php file immediately and it will inturn show the progress gif image layer first. Only after that it will load the php file.

Share it onShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Written by kurinchilamp


Website: http://

Leave a Reply

Your email address will not be published. Required fields are marked *

Read previous post:
Google Chrome “Aw, Snap!” … Something went wrong

How to fix Google Chrome Error? i) Close the chrome browser ii) From the shortcut on your desktop or from...

Close