Step 1
Drag and drop the script manager from the ToolBox under the body and the form tag.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</asp:ScriptManager>
Step 2
Drag and drop the updatepanel from toolbox
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate
<asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click"
style="height: 26px" />
</ContentTemplate>
</asp:UpdatePanel>
<ContentTemplate
<asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click"
style="height: 26px" />
</ContentTemplate>
</asp:UpdatePanel>
Step 3
Drag and drop the update progress from the toolbox. Remember one thing
that the update progress is outside the update panel on the same page
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0">
<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: 120px;">
<table style=" background-color: White; font-family: Sans-Serif; text-align: center; border: solid 1px #275721; color: #275721; width: inherit; height: inherit; padding: 15px;">
<tr>
<td style=" text-align: inherit;"><img src="Images/ajax-loader.gif" alt="Loading" /></td>
</tr>
</table>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
Step 4
AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0">
<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: 120px;">
<table style=" background-color: White; font-family: Sans-Serif; text-align: center; border: solid 1px #275721; color: #275721; width: inherit; height: inherit; padding: 15px;">
<tr>
<td style=" text-align: inherit;"><img src="Images/ajax-loader.gif" alt="Loading" /></td>
</tr>
</table>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
Step 4
Goto the Code behind the file and write this code. Wait for 2 Second
and after that get the Message:
protected void Button1_Click(object
sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000); //wait 2 second
Response.Write("Welcome User");
}
{
System.Threading.Thread.Sleep(2000); //wait 2 second
Response.Write("Welcome User");
}