Design Code :
<style type="text/css">
.modal {
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
background-color: Black;
opacity: 0.6;
}
.center {
z-index: 1000;
margin: 300px auto;
padding: 10px;
width: 130px;
}
.center img {
height: 128px;
width: 128px;
}
</style>
<form id="form1" runat="server">
<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>
<div style="text-align:center;">
<asp:Button ID="Button1" Text="Click Me" runat="server" OnClick="Button1_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
Put code in
code behind (.cs) file.
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}
Output :