Ajax Progress bar

.ASPX
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <Triggers>
    <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
    </Triggers>
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
<asp:Panel ID="Panel2" runat="server">
     <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DynamicLayout="true">
        <ProgressTemplate >
       <div style="background-color: Gray; filter:alpha(opacity=60); opacity:0.60; width: 100%; top: 0px; left: 0px; position: fixed; height: 100%;">           
        </div>
        <div style="margin:auto;
              font-family:Trebuchet MS;
              filter: alpha(opacity=100);
              opacity: 1;
              font-size:small;
              vertical-align: middle;
              top: 45%;
              position: fixed;
              right: 45%;
              color: #275721;
              text-align: center;
              background-color: White;
              height: 100px;">
               <table style=" background-color: White; font-family: Sans-Serif; text-align: center; border: solid 1px #275721; color: #275721; width: inherit; height: inherit; padding: 0px;">
                <tr>
                <td style=" text-align: inherit;"><img src="load.GIF" alt="Loading"  /></td>
                <td style=" text-align: inherit;"><span style="font-family: Sans-Serif; font-size: medium; font-weight: bold; font">Loading...</span></td>
                </tr>
                </table>
              </div>
        </ProgressTemplate>
        </asp:UpdateProgress>
         </asp:Panel>
    </ContentTemplate>
    </asp:UpdatePanel>


.CS

protected void Button1_Click(object sender, EventArgs e)
    {       
        System.Threading.Thread.Sleep(5000);
    }

image:- http://i.stack.imgur.com/veWrm.gif