Add a loading gif while php runs server side

I would like to request a walk through of how to add a loading gif while a php script is running, called from a POST event.

How about a spinner that appears at the time an upload is started and disappears when the upload is finished?  The concept is just like the example above, but instead of calling a background script for a progress indicator, we can just load an image like this at the start of the upload, and hide it at the end.  Easy!

<style type="text/css">
#loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0.75) url(images/loading2.gif) no-repeat center center;
  z-index: 10000;
}
</style>

Select allOpen in new window

<form class="form horizontal">
  <div class="row">
    <label class="col-xs-4">Your Name:</label>
    <div class="col-xs-8">
      <input type="input" class="form-control" />
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

Select allOpen in new window

<div id="loader"></div>

Select allOpen in new window

<script>
var spinner = $('#loader');
$(function() {
  $('form').submit(function(e) {
    e.preventDefault();
    spinner.show();
    $.ajax({
      url: 't2228.php',
      data: $(this).serialize(),
      method: 'post',
      dataType: 'JSON'
    }).done(function(resp) {
      spinner.hide();
      alert(resp.status);
    });
  });
});
</script>

Select allOpen in new window

 <?php
    //echo $_REQUEST["updateStageButton"];
    //echo $_SERVER['REQUEST_METHOD'];
    //echo "<br />";
if($_SERVER['REQUEST_METHOD']="POST")
    {
        if (array_key_exists("poid",$_REQUEST))
        {
            $poid=$_REQUEST["poid"];
        }
        if (array_key_exists("submitFormName",$_REQUEST))
        {
            $submitFname=$_REQUEST["submitFormName"];
        }

        if (array_key_exists("updateStageButton",$_REQUEST))
        {
			
            $statusChange=$_REQUEST["updateStageButton"];
				$queryText=getProductionOrder($poid);
					$result = querySelectDB($queryText);
						$row=mysqli_fetch_row($result);
						
            if($statusChange==160)
			{
				$recordsAffected = updateWorkStatus($row[1],161);
				$recordsAffected1 = Update_ProductionTimeCompletionStatus($poid, $row[2], 161);
			}//if

            if($statusChange==161)
			{
				$recordsAffected = updateWorkStatus($row[1],162);
				$recordsAffected1 = Update_ProductionTimeCompletionStatus($poid, $row[2], 162);
			}
			mysqli_free_result($result);
        }

    }

if(empty($poid))
{
    $poid=$_GET['poid'];
}


    ?>

Select allOpen in new window