Category >
ASP.NET
|| Published on :
Wednesday, September 4, 2019 || Views:
4056
||
Show Loading Progress Indicator
Introduction
Here Pawan Kumar will explain how to show Loading Progress Indicator using GIF Image when UpdatePanel is updating in ASPNet.aspx
Description
How to Show Loading Progress Indicator using GIF Image when UpdatePanel is updating in ASPNet.aspx
So follow the steps to learn Show Loading Progress Indicator using GIF Image when UpdatePanel is updating in ASPNet.aspx
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
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">
<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 align="center">
<h1>
Click the below button to see the UpdateProgress!</h1>
<asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Default.aspx.cs
using System;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}
}
Conclusion:
So, In this tutorial we have learned, Show Loading Progress Indicator using GIF Image when UpdatePanel is updating in ASPNet.aspx