Loading Page by jQuery

Cascading Style Sheets (CSS)
<style type="text/css">
    .modal
    {
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 99;
        opacity: 0.8;
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        min-height: 100%;
        width: 100%;
    }
    .loading
    {
        font-family: Arial;
        font-size: 10pt;
        border: 5px solid #67CFF5;
        width: 200px;
        height: 100px;
        display: none;
        position: fixed;
        background-color: White;
        z-index: 999;
    }
</style>

jQuery
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

Javascript
<script type="text/javascript">
  function ShowProgress() 
    {
   setTimeout(function () {
       var modal = $('<div />');
       modal.addClass("modal");
       $('body').append(modal);
       var loading = $(".loading");
       loading.show();
       var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
       var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
       loading.css({ top: top, left: left });
   }, 200);
}
$('form').live("submit", function () {
   ShowProgress();
});
</script>

HTML
<div class="loading" align="center">
        Loading. Please wait.<br />
        <br />
        <img src="images/loader.gif" alt="" />
</div>