HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
margin: 5;
padding: 5;
font-family: Arial;
}
.modal
{
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
}
.center
{
z-index: 1000;
margin: 300px auto;
padding: 10px;
width: 130px;
background-color: White;
border-radius: 10px;
filter: alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
}
.center img
{
height: 128px;
width: 128px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h1>Ajax Update Progress in Asp.net</h1>
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="modal">
<div class="center">
<img alt="" src="loader.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<h3>Click the button to see the UpdateProgress!</h3>
<asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
C#:
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
//Here i have added delay of 5 seconds so that we can view the ASP.Net AJAX UpdateProgress in action
}
Demo:
