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.

Visit kurinchilamp to learn more info