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>

TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/38

Listed below are links to weblogs that reference Google Analytics like AJAX Progress Indicator:

» Google Analytics AJAX Progress Indicator from DotNetKicks.com
You've been kicked (a good thing) - Trackback from DotNetKicks.com [Read More]

Comments


Posted by: asxjackal on July 31, 2007 12:00 AM

Do you have a VB sample code

Posted by: nick chan on September 4, 2007 12:00 AM

nice work. but would be USEFUL is the updatepanel could be disabled, sort of like became transparent

Posted by: alee on October 4, 2007 12:00 AM

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.

Posted by: Anonymous on May 5, 2008 12:00 AM

error :
Format of the initialization string does not conform to specification starting at index 0.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • Anonymous wrote: error : Format of the initialization string does not conform to specification starting at index 0. ...
  • alee wrote: It seems the animation stops playing when the content has been returned to the page and is rendering...
  • nick chan wrote: nice work. but would be USEFUL is the updatepanel could be disabled, sort of like became transparent...
  • asxjackal wrote: Do you have a VB sample code ...