Click here to Skip to main content
15,868,292 members
Articles / Web Development / ASP.NET

ASP.NET/ AJAX Page Loader Progress Bar/ Splash Screen

Rate me:
Please Sign up or sign in to vote.
3.12/5 (18 votes)
1 Oct 2006CPOL2 min read 205.1K   2.4K   73   28
This article shows how you can display the loading progress of your page when you deal with heavy pages.

Introduction

Today, complex server controls and extensive JavaScript libraries (e.g., AJAX ) are very common. They can considerably increase the size and the loading time of your page. Unfortunately, it is very hard to catch how slow your page is while you are in the development environment. You will be surprised to see how long some users have to wait until your page is completely downloaded. Wouldn't it be nice if you could communicate to the users to stay patient until the page and scripts are downloaded? In some cases, you would rather hide your page until it is fully downloaded to avoid premature events when your scripts are still loading. This article shows how you can display the loading process of your page with a progress bar. Additionally, you can use this as a splash window to show messages, news, or ads that you want the user to see first.

The technique discussed here is not limited to ASP.NET. If you are using other server-side scripting languages, keep on reading!

Update: Live sample.

Using the code

To make life easier, I encapsulated all the code into the LoadingNotifier class. To use the LoadingNotifier, your page inherits the LoadingNotifier class. First, you initialize the loading progress bar by calling initLoader() in a server script tag, e.g.: <%initLoader(strMsg);%>. This method writes JavaScript to the response object and calls the Flush() method to send the buffered output to the client. This JavaScript function adds the progress bar to the DOM and shows the page is being loaded. From here, on each achieved milestone, you call the Notify(strProgressPercent, strLoadingStatusMsg) method of LoadingNotifier and pass in the progress percentage and the status message. Each call to the Notify method writes a JavaScript function to the Response that updates the progress bar. When the progress bar reaches 100%, it automatically gets removed from the DOM. The progress bar is totally customizable, and takes its stylesheet from the page theme. You can set a background color for the progress bar container to hide the page until it is 100% loaded.

ASP.NET
<%@ Page Language="C#" Inherits="LoadingNotifier" Theme="Default" %>
<%%
    //shahin@themorningoutline.com provided this UNDER GNU GPL 
    // For more inforamtion visit http://www.themorningoutline.com/
   
    // Page Inhertits the LoadNotifier Class 
 %>

<!DOCTYPE html >
<html>
<head runat="server">
    <title>www.themorningoutline.com ASP.NET Sample</title>
</head>
<body style="background-color: #999999; font-size: 12px; 
             font-family: Verdana, Arial, Helvetica, sans-serif;">
  
  
    <% //Initilize thr Progress Bar and show a message
        initNotify("Welcome to theMorningOutline. Free tickets from today!");
        System.Threading.Thread.Sleep(3000);
    %>
    <form id="form1" runat="server">
  
        <span style="font-size: 12pt"><strong>
          <span style="color: #ffffff">Select Your Departure Date: </span></strong> 
          </span>
          
        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
        <br />
        <% 
            // We have achieved a milestone. Let the user know!
            Notify("30", "Loading Departure Calendar Completed ...");
            // Simulate Internet dalay
           System.Threading.Thread.Sleep(2000);
           
             %>
        <span style="font-size: 12pt"><span style="color: #ffffff">
           <strong>Select Your Return Date: </strong>
           <span style="color: #000000"> </span></span></span>
        <asp:Calendar ID="Calendar2" runat="server"></asp:Calendar>
        <br />
      
           <% 
           Notify("60", "Loading Arrival Calendar Completed ...");
           System.Threading.Thread.Sleep(2000);
           
             %>
               <span style="font-size: 14pt">
               <span style="color: #ffffff">Your Recent Flights:</span><strong>
               <spanstyle="color: #ffffff"> </span></strong></span>  <br />
        
        <span style="font-size: 12pt"><span style="color: #ffffff"></span>
        </span>
        <asp:GridView ID="GridView1" runat="server" 
            AutoGenerateColumns="False" CellPadding="4"
            DataSourceID="XmlDataSource" ForeColor="#333333" 
            GridLines="None" Style="border-left-color: gray;
            border-bottom-color: gray; border-top-style: outset; border-top-color: gray;
            border-right-style: outset; border-left-style: outset; border-right-color: gray;
            border-bottom-style: outset">
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <Columns>
                <asp:BoundField DataField="id" HeaderText="id" SortExpression="id" />
                <asp:BoundField DataField="Origin" 
                      HeaderText="Origin" SortExpression="Origin" />
                <asp:BoundField DataField="Destination" 
                    HeaderText="Destination" SortExpression="Destination" />
                <asp:BoundField DataField="Duration" 
                       HeaderText="Duration" SortExpression="Duration" />
                <asp:BoundField DataField="Price" 
                       HeaderText="Price" SortExpression="Price" />
            </Columns>
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <EditRowStyle BackColor="#999999" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        </asp:GridView>
        <asp:XmlDataSource ID="XmlDataSource" runat="server" 
                  DataFile="~/Source.xml" XPath="/travel/Itinerary">
        </asp:XmlDataSource>
        <%
            Notify("100", "Loading Your Previous Trips Completed...");
          System.Threading.Thread.Sleep(2000);
         %>
    </form>
     
    
</body>
</html>

The code-behind:

C#
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

// shahin@themorningoutline.com provided this UNDER GNU GPL 
//For more inforamtion visit www.themorningoutline.com
public class LoadingNotifier: System.Web.UI.Page
{
 
    public  void initNotify( string StrSplash)
    {
        // Only do this on the first call to the page
        if ((!IsCallback) && (!IsPostBack))
        {
            //Register loadingNotifier.js for showing the Progress Bar
            Response.Write(string.Format(@"<script type='text/javascript' 
                   src='scripts/loadingNotifier.js'></script>
              <script language="'javascript'" type='text/javascript'>
              initLoader('{0}');
              </script>",StrSplash));
           // Send it to the client
            Response.Flush();
            
        }

    }
    public  void Notify(string strPercent, string strMessage)
    {
        // Only do this on the first call to the page
        if ((!IsCallback) && (!IsPostBack))
        {
            //Update the Progress bar

            Response.Write(string.Format("<script language="'javascript'" type" + 
                           "='text/javascript'>setProgress({0},'{1}'); </script>", 
                           strPercent, strMessage));
            Response.Flush();
        }
    }
}

Remember that the Page_Load event has been processed before the page is being downloaded, therefore if you have expensive operations in your Page_Load event, you cannot display the processing progress using this method. This method uses the W3C Standard DOM methods which require the body tag to be present to display the progress bar. To display the loading status during Page_Load or other events which are processed prior to sending the page to the client, you can directly write your status message to the Response object and call the Flush method. When the page is completed at the client, you should clean up your status messages.

Conclusion

Finally remember that using the LoadingNotifier class actually slows down the loading process of your page, and it should be avoided unless your page is really heavy. Comments here!

Cheers!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionLinks are all obsolete Pin
RJ_Zed24-Jun-16 1:57
RJ_Zed24-Jun-16 1:57 
QuestionLive Demo Site Pin
DavidWayneJohnson4-Mar-14 10:50
DavidWayneJohnson4-Mar-14 10:50 
GeneralMy vote of 1 Pin
lalupatel25-Nov-10 20:53
lalupatel25-Nov-10 20:53 
GeneralHii :) Pin
Navin Pandit16-Dec-09 22:55
Navin Pandit16-Dec-09 22:55 
GeneralLoading Gridview Progress Pin
kjward16-Oct-07 4:21
kjward16-Oct-07 4:21 
QuestionHelp &quot;Response is not available in this context. &quot; [modified] Pin
rafiki31@gmail.com15-Aug-07 7:14
rafiki31@gmail.com15-Aug-07 7:14 
GeneralRe: Help &quot;Response is not available in this context. &quot; Pin
mohit rawat19-Feb-08 0:28
mohit rawat19-Feb-08 0:28 
Generalcode behind Pin
dsmportal7-Apr-07 12:52
dsmportal7-Apr-07 12:52 
GeneralRe: code behind Pin
dsmportal8-Apr-07 4:56
dsmportal8-Apr-07 4:56 
QuestionUsing Progress Bar with Master pages / within form or div tag Pin
andre271122-Jan-07 5:45
andre271122-Jan-07 5:45 
AnswerRe: Using Progress Bar with Master pages / within form or div tag Pin
juras924-Apr-07 8:47
juras924-Apr-07 8:47 
GeneralRe: Using Progress Bar with Master pages / within form or div tag Pin
Daniel Ballinger28-Aug-07 14:38
Daniel Ballinger28-Aug-07 14:38 
Generalphp loader Pin
jonavanmona5-Nov-06 11:40
jonavanmona5-Nov-06 11:40 
GeneralExtended CSS used (off topic) Pin
Sergey Rybalkin7-Oct-06 13:07
Sergey Rybalkin7-Oct-06 13:07 
Hi,

First of all thank you for the article, it is quite usefull for meSmile | :) . Also I've noticed that you used some non-standard CSS attributes like "-moz-opacity: 0.75" and "filter: ...". Can you suggest any internet resource with information on these tags? Especialy for Mozilla/Gecko related _moz_... tags, I was googling quite a lot, but did not find anything usefull. Even mozilla oficial developers site has quite a brief description.

Thanks,
AnswerRe: Extended CSS used (off topic) [modified] Pin
Shahin__8-Oct-06 6:56
Shahin__8-Oct-06 6:56 
QuestionDisplay the loading status during Page_Load Pin
sithwad3-Oct-06 0:04
sithwad3-Oct-06 0:04 
AnswerRe: Display the loading status during Page_Load Pin
Shahin__3-Oct-06 15:42
Shahin__3-Oct-06 15:42 
GeneralRe: Display the loading status during Page_Load Pin
sithwad3-Oct-06 22:29
sithwad3-Oct-06 22:29 
GeneralRe: Display the loading status during Page_Load Pin
Shahin__4-Oct-06 17:53
Shahin__4-Oct-06 17:53 
Generalgreat job Pin
vik202-Oct-06 18:58
vik202-Oct-06 18:58 
QuestionASP.Net with VB.Net version Pin
Markgina1-Oct-06 21:30
Markgina1-Oct-06 21:30 
AnswerRe: ASP.Net with VB.Net version Pin
Shahin__2-Oct-06 8:55
Shahin__2-Oct-06 8:55 
AnswerRe: ASP.Net with VB.Net version Pin
dacoty4-Oct-06 9:24
dacoty4-Oct-06 9:24 
GeneralRe: ASP.Net with VB.Net version Pin
Shahin__4-Oct-06 17:38
Shahin__4-Oct-06 17:38 
GeneralRe: ASP.Net with VB.Net version Pin
dacoty5-Oct-06 2:45
dacoty5-Oct-06 2:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.