Progress Bar

Introduction

This tip tells you about progress bar at the time of post back so that the user can't perform the action during critical action performed like credit card payment, saving the data to database, etc. Here, I have code for that.

<asp:UpdateProgress DisplayAfter="1" 
ID="upProgress" DynamicLayout="true" runat="Server"
        AssociatedUpdatePanelID="upPay" >
        <ProgressTemplate>
            
            <img id="Img1" src="~/images/ajax-loader.gif" 
            runat="server" visible="true" alt="jrc" /><br />
            
            <div style="width:40%;">
                <asp:Label ID="lblwarningmsg"  ForeColor="Red" 
                text="Please wait while the transaction is processed and do not click the 
                "back button" or refresh  or close the browser window." runat="server">
                </asp:Label>
            </div>

        </ProgressTemplate>
       
    </asp:UpdateProgress>

Also add this script for display progress bar center of the page:

<script language="JavaScript" type="text/javascript">
       function adjustDivs() {
           var df = document.getElementById('<%=upProgress.ClientID %>');
           df.style.position = 'absolute';
           df.style.left = (document.documentElement.scrollLeft + 45) + '%';
           df.style.top = (document.documentElement.scrollTop + 300) + 'px';
       }
       adjustDivs();
       window.onload = adjustDivs;
       window.onresize = adjustDivs;
       window.onscroll = adjustDivs;
   </script>