Loading Image due to post back in asp.net page by Jquery

Loading Image due to post back in asp.net page by Jquery:

Download Source code : download

Demo:

Add a image container div:

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

Add CSS :

<style type="text/css">
    .modalPopup {
        position: fixed;
        top: 0;
        left: 0;
        background-color: Black;
        z-index: 99;
        opacity: 0.2;
        filter: alpha(opacity=80);
        -moz-opacity: 0.2;
        min-height: 100%;
        width: 100%;
    }

    .loading {
        font-family: Arial;
        font-size: 10pt;
        border: 5px solid #67CFF5;
        width: 300px;
        height: 200px;
        display: none;
        position: fixed;
        background-color: White;
        z-index: 999;
    }
</style>

Now Add Jquery Code to handle Loading Image:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
  function LoadingProgress() {
    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 });
    }, 300);
  }
  $('form').live("submit", function () {
        LoadingProgress();
  });
</script>

Now Add this code into .cs file

protected void Page_Load(object sender, EventArgs e)
{
 if (!IsPostBack)
 {
 string script="$(document).ready(function(){$('[id*=btnSubmit]').click(); });";
ClientScript.RegisterStartupScript(this.GetType(),"LoadingProgress",script,true); }  
}

protected void btnSubmit_Click(object sender, EventArgs e)
{
    //Add Fake Delay to simulate long running process
    System.Threading.Thread.Sleep(5000);
    /*---------------*/
}