When you submit a form, the page is dismissed, so you can't be certain of getting any kind of screen updating before it happens. The only way is to allow time for the screen update by delaying the sending of the form, ensuring that it degrades if script isn't available:
Code:
<!doctype html>
<html>
<head>
<title>Show image when sending form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="errorModal" class="modal">
<div>
<h4 class="error">ERROR</h4>
<p>This action will delete all data and cannot be reversed. Click OK below to proceed or Cancel to abort.</p><br />
<form id="modalConfirm" name="modalConfirm" method="POST" enctype="multipart/form-data" action="#" novalidate>
<fieldset id="submitAreaRight">
<input type="submit" name="okButton" id="okButton" class="shortButton" value="OK" >
<input type="button" name="cancelButton" id="cancelButton" class="longButton" value="Cancel" onclick="window.location ='#';">
</fieldset>
<div id="loaderDiv" style="display:none">IMAGE<img src="/images/icons/blue/loader.gif" title="IMAGE"/></div>
</form>
<a href="#close" title="Close"></a>
</div>
</div>
<script type='text/javascript'>
document.getElementById( "modalConfirm" ).onsubmit = function()
{
var obj = this;
this.okButton.disabled=true;
this.cancelButton.disabled=true;
document.getElementById( 'loaderDiv' ).style.display = "block";
setTimeout( function(){ obj.submit(); }, 1000 );
return false;
}
</script>
</body>
</html>