How to use UpdatePanelAnimationExtender in Ajax?
Showing update progress in your web page while submitting the data or fetching the data from the database is a common requirement while developing the application. So sometimes you need to show the updation in an attractive manner. Here comes the Ajax UpdatePanelAnimationExtender for you to show the update progress in an animated manner.
The main purpose of Ajax UpdatePanelAnimationExtender is, as its name suggests, shows the update progress in an animated way. Showing the progress bar in an animated way helps your webpage to get a rich look. This Upadate panel animation extender allows to show the progress visually when the update is in progress or the panel has been refreshed.
Ajax UpdatePanelAnimationExtender uses UpdatePanel also so that your page will not postback when you show the progress of the update.
To get the animation, Ajax UpdatePanelAnimationExtender uses Scripts, here in this article we have used JavaScript to show and hide the message and animation image.Implementation of Ajax UpdatePanelAnimationExtender
To use Ajax UpdatePanelAnimationExtender here we have used ScriptManager, UpdatePanel, Label and a Button control and also the JavaScript. First drag and drop ScriptManager(ScriptManager1),Button(btnProgress), Label(lblProgressMsg),Updatepanel(UpdatePanel1),UpdatePanelanimation extender(UpdatePanelAnimationExtender1). Association between the controls can be seen in the coding part. 
We add the update progress image, button and the Label to show the update completed message inside the UpdatePanel to avoid the postback. Finally we set the TargetControlID Of the Ajax UpdatePanelAnimationExtender to the Id of the UpdatePanel. The UpdatePanelAnimation extender adds animation to the Updatepanel.
Here we are using one .gif file to show the progress while the update panel updating the content.
Below is the complete .aspx page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpdatePanelAnimationExtention.aspx.cs" Inherits="Practice2010.UpdatePanelAnimationExtention" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>
<script type="text/javascript">
function InProgress()
{
var panelProg = $get('divProgress');
panelProg.style.display = '';
var lbl = $get('<%= this.lblProgressMsg.ClientID %>');
lbl.innerHTML = '';
}
function onComplete()
{
var panelProg = $get('divProgress');
panelProg.style.display = 'none';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblProgressMsg" runat="server" Text=""></asp:Label>
<div id="divProgress" style="display:none">
<asp:Image ID="LoadingImage" runat="server" ImageUrl="~/images/progress1.gif" />
Processing your request, please wait...
</div>
<br />
<asp:Button ID="btnProgress" runat="server" onclick="btnProgress_Click"
Text="Show Progress" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="UpdatePanel1" runat="server">
<Animations>
<OnUpdating>
<Parallel duration="0">
<ScriptAction Script="InProgress();" />
<EnableAction AnimationTarget="btnProgress" Enabled="false" />
</Parallel>
</OnUpdating>
<OnUpdated>
<Parallel duration="0">
<ScriptAction Script="onComplete();" />
<EnableAction AnimationTarget="btnProgress" Enabled="true" />
</Parallel>
</OnUpdated>
</Animations>
</asp:UpdatePanelAnimationExtender>
</div>
</form>
</body>
</html>
In the code behind we just have used the sleep method to delay 35 seconds and during this period we shows the animated image and also the message.
protected void btnProgress_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3500);
lblProgressMsg.Text = "Your request has been processed successfully";
}
When we load the page in browser the output look like as follows
