Google Analytics like AJAX Progress Indicator
Lately I have been playing around with AJAX progress indicators (gmal-like progress indicator, apply an UpdatePanel to an asp.net Wizard, and animated GridViews). I saw this one (see screen shot below) on one of the Google Analyitics pages. I liked it - so I figured I would write up a quick sample using it. I am not going to go into detail regarding the specifics of the implementation, but the complete source for the page is listed below (it requires the AjaxControlToolkit). Also, here is the animated gif 
and here is the link to the tool that I used to create it. Enjoy!
[Update: 7/31/2007] I have included a link to download this sample website. The site contains 2 pages both displaying the same demo. The first page (Default.aspx) uses C# for the codebehind and the second one (Default2.aspx) uses VB.
View Live Demo | Download Code
Complete source for this example:
<%@ Page Language="C#" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> <!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"> <script runat="server"> /// <summary> /// /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void Page_Load(object sender, EventArgs e) { if (this.IsPostBack) { // simulate a long postback, so we // can fully enjoy the animation ... System.Threading.Thread.Sleep(3000); } } </script> <head id="head" runat="server"> <title>Google Analyitics Style Progress</title> <script type="text/javascript" language="javascript"> function onUpdating(){ // get the update progress div var updateProgressDiv = $get('updateProgressDiv'); // get the gridview element var gridView = $get('<%= this.gvCustomers.ClientID %>'); // make it visible updateProgressDiv.style.display = ''; // get the bounds of both the gridview and the progress div var gridViewBounds = Sys.UI.DomElement.getBounds(gridView); var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv); // center of gridview var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2); var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2); // set the progress element to this position Sys.UI.DomElement.setLocation (updateProgressDiv, x, y); } function onUpdated() { // get the update progress div var updateProgressDiv = $get('updateProgressDiv'); // make it invisible updateProgressDiv.style.display = 'none'; } </script> <style> .updateProgress { border-width:1px; border-style:solid; background-color:#CCCCCC; position:absolute; width:130px; height:50px; } .updateProgressMessage { margin:3px; font-family:Trebuchet MS; font-size:small; vertical-align: middle; } </style> </head> <body> <form id="form" runat="server"> <asp:ScriptManager ID="scriptManager" runat="server" /> <div> <asp:SqlDataSource ID="sqldsCustomers" runat="server" SelectCommand="select customerid, companyname, contactname, contacttitle from dbo.customers" SelectCommandType="Text" ConnectionString="todo" /> <p style="background-color:AliceBlue; width:95%"> Example of a Google Analyitics style progress indicator.<br /> To view the indicator, click on a column header to sort the GridView, or click on one of the paging buttons. </p> <br /> <asp:Label ID="lblTitle" runat="server" Text="Customers" BackColor="lightblue" Width="95%" /> <asp:UpdatePanel ID="updatePanel" runat="server"> <ContentTemplate> <asp:GridView ID="gvCustomers" runat="server" AllowPaging="true" AllowSorting="true" PageSize="10" DataSourceID="sqldsCustomers" Width="95%"> <AlternatingRowStyle BackColor="aliceBlue" /> <HeaderStyle HorizontalAlign="Left" /> </asp:GridView> </ContentTemplate> </asp:UpdatePanel> <ajaxToolkit:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="updatePanel"> <Animations> <OnUpdating> <Parallel duration="0"> <%-- place the update progress div over the gridview control --%> <ScriptAction Script="onUpdating();" /> </Parallel> </OnUpdating> <OnUpdated> <Parallel duration="0"> <%--find the update progress div and place it over the gridview control--%> <ScriptAction Script="onUpdated();" /> </Parallel> </OnUpdated> </Animations> </ajaxToolkit:UpdatePanelAnimationExtender> <div id="updateProgressDiv" class="updateProgress" style="display:none"> <div align="center" style="margin-top:13px;"> <img src="Img/simple.gif" /> <span class="updateProgressMessage">Loading ...</span> </div> </div> </div> </form> </body> </html>
Comments
Do you have a VB sample code
nice work. but would be USEFUL is the updatepanel could be disabled, sort of like became transparent
It seems the animation stops playing when the content has been returned to the page and is rendering. Have you found a way around this? If there is a lot of content it can take a while to render, and so it makes the animation kind of pointless. I have read somewhere that an UpdatePanelAnimationExtender should stop this problem, but Ive followed your example and its still happening.
error :
Format of the initialization string does not conform to specification starting at index 0.