<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
 <script src="JS/jquery-1.10.2.js" type="text/javascript"></script>
<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;

    width: 200px;
    height: 100px;
    display: none;
    position: fixed;

    z-index: 999;
}
</style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function ShowProgress() {
            setTimeout(function () {
                var modal = $('<div />');
                modal.addClass("modal");
                $('ContentPlaceHolder1').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>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:Button ID="btnSubmit" runat="server" Text="Button" OnClick="btnSubmit_Click"/>
    <div class="loading" align="center">
    Loading. Please wait.<br />
    <br />
    <img src="IMAGES/loader231.gif" alt="" />

</div>
</asp:Content>