How to add Ajax Update Progress Control in Asp.net Website

How to add Ajax Update Progress Control in Asp.net Website.

---

Step 1 : Open your website first.

Step 2 : Open your .aspx page in clicking on page in Solution Explorer.

Step 3 : Add Update panel in your page and add one button .

<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
        <ContentTemplate>
            <asp:Button ID="Button1" runat="server" Text="Button"
                onclick="Button1_Click"  />           
        </ContentTemplate>

 </asp:UpdatePanel>

Step 4 : Add update progrees control from Ajax Extensions option

Step 5 : Put below code and related style sheet

 <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanelName">
        <ProgressTemplate>
            <asp:Image ID="imgLoading"

                         ImageUrl="images/loading.gif" runat="server" />
            <div class="modalPopup">

                  //backround style
            </div>
        </ProgressTemplate>
 </asp:UpdateProgress>

 Step 6 : Put this style sheet in head tag

<style type="text/css">
        .modalPopup
        {
            text-align: center;
            padding-top: 30px;
            border-style: solid;
            border-width: 1px;
            background-color: #333;
            position: fixed;
            width: 107%;
            height: 150%;
            z-index: 9999;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
            -khtml-opacity: 0.5;
            opacity: 0.5;
            top: -95px;
            left: -20px;
        }
    </style>

Step 7 : This way you can add update progress bar in your page.