AJAX with Continuous Progress Bar

AJAX with Continuous Progress Bar
Progress Bar to work in ASP.Net.
I have my Button, the ModalPopupExtender, the Panel that the extender will display, the Script Manager, and a hidden control.

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div>
            <asp:Button ID="btnSubmit" onclick="btnSubmit_Click" OnClientClick="StartProgressBar()"
                     runat="server" Text="Submit Time" Width="170px" />

            <ajaxToolkit:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server"
                     BackgroundCssClass="ModalBackground" behaviorID="ProgressBarModalPopupExtender"
                     TargetControlID="hiddenField" PopupControlID="Panel1" />

            <asp:Panel ID="Panel1" runat="server" Style="display: none; background-color: #C0C0C0;">
                 <img src="progressbar.gif" alt="" />
            </asp:Panel>

            <asp:HiddenField ID="hiddenField" runat="server" />
       </div>
   </ContentTemplate>
</asp:UpdatePanel>

Also notice that the Button has both of the click events populated. The onclick event will be the server-side event handler.

protected void btnSubmit_Click(object sender, EventArgs e)
{
     Thread.Sleep(7000);
     ProgressBarModalPopupExtender.Hide();
}

The OnClientClick event will be calling a javascript function..

<script language="javascript" type="text/javascript">
        function StartProgressBar() {
                var myExtender = $find('ProgressBarModalPopupExtender');
                myExtender.show();
                return true;
        }
</script>

ModalPopupExtender.

Add link to your Head tag

<link href="main.css" rel="stylesheet" type="text/css" />

Then add this entry to the CSS file.

.ModalBackground
{
        background-color:Gray;

        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
}