Matt Berseth

If you use AJAX in your web app's, you no doubt have made use of some sort of progress/status indicator that lets the user know that some operation is currently executing.  In the app I am currently working on we use an animated gif for this.  It works great, but sometimes you might find it nice to have more control over the indicator - i.e. interacting with it via JavaScript and styling it using CSS.

So I did a little research and found a nice example of one built using script.aculo.us.  The demo page looked great so I downloaded the source to get a feel for how it worked.  I liked what I saw so I thought I would create a new AjaxControlToolkit control based on this example.  My original goal was just to port it over to ASP.NET, but as I started playing around with it I thought I might make a few changes to it as well.  So during the process of porting it, I made the following tweaks

• I added a mode that runs the progress bar from 0 to 100 continuously.  This mode would be useful for scenarios where you don't know how long an operations would run for (like a typical partial postback)
• The original requires different images for progress indicators of different widths.  I chose to use a repeating background image instead so I could use a single progress image no matter the width of the control.
• I add an updating CSS class to the control while the progress bar is running.  In my demo page I use this to darken the percentage while the indicator is running.  I was also thinking about adding the current percentage to the class as well so you could have a custom style applied depending upon what the current percentage is.  Then you could do something like .progress .100 {  } to control the styling when the indicator is displaying 100%.
• I used a skinning approach that is very similar to the Toolkit's Tab control.  I went ahead and created a bunch of sample skins (shown above) just to make sure my skinning technique worked alright.

Below are some details on how the controls - including how to add one to your page, interacting with it from JavaScript and creating custom skins using CSS.  Read on if you are interested and don't forget to check out the live demo and download.  I built it using .Net 3.5 and Toolkit version 3.5.11119.0, but I think it could be ported back to .Net 2.0 without too many issues. 

Live Demo (IE6, IE7, FF and Opera) | Download

Using the Control

The download contains plenty of examples of how to interact with the control, but here is some sample markup that specifies the progress mode as well as the width ...

   1:  <!-- Continuous Mode / 150px wide --> 

   2:  <mb:ProgressControl ID="ProgressControl1" runat="server" Mode="Continuous" Width="150px" />

   3:  <!-- Manual Mode / 70px wide --> 

   4:  <mb:ProgressControl ID="ProgressControl12" runat="server" Mode="Manual" Width="70px" /> 

When the control is in Continuous mode, you can start and stop the progress animation by using the play() and stop() JavaScript functions

   1:  //  start the indicator

   2:  $find('ProgressControl1').play();

   3:   

   4:  //  stop it

   5:  $find('ProgressControl1').stop();

And when the control is in Manual mode, you can use the set_percentage to manually change the percentage value.  You can either provide an absolute value like in the first example, or a value that is relative to what ever the current value is - like the second example.

   1:  //  set the percentage to 62

   2:  $find('ProgressControl1').set_percentage(62);

   3:   

   4:  //  increase the percentage by 15

   5:  $find('ProgressControl1').set_percentage('+15');

HTML Emitted by the Control

Below is the markup the control emits.  1 DIV for containing the progress image, 1 DIV for displaying the percentage text, 2 DIV's for applying a border and an outer DIV that wraps it all.

   1:  <div class="ajax__progress" class="ajax__progress" id="ProgressControl1">

   2:      <!-- outer and inner elements for creating a border -->

   3:      <div class="ajax__progress_outer" id="ProgressControl1_outer">

   4:          <div class="ajax__progress_inner" id="ProgressControl1_inner">

   5:              <!-- The background image for this element displays the indicator -->

   6:              <div class="ajax__progress_indicator" id="ProgressControl1_indicator" />

   7:          </div>

   8:      </div>

   9:      <!-- This element displays the percentage -->

  10:      <div class="ajax__progress_info" id="ProgressControl1_info">75%</div>

  11:  </div>

Skinning the Control

To skin the control, you need to set the CssClass property of the ProgressControl to the name of the CSS class that defines your custom skin.  For the skin portion of the demo page I have defined 6 custom themes.  Below is the sample markup for this section ... 

   1:  <mb:ProgressControl ID="ProgressControl4" runat="server" CssClass="green" Mode="Manual" Width="200px" />            

   2:  <mb:ProgressControl ID="ProgressControl5" runat="server" CssClass="yelllow" Mode="Manual" Width="200px" />            

   3:  <mb:ProgressControl ID="ProgressControl6" runat="server" CssClass="orange" Mode="Manual" Width="200px" />            

   4:  <mb:ProgressControl ID="ProgressControl7" runat="server" CssClass="red" Mode="Manual" Width="200px" />            

   5:  <mb:ProgressControl ID="ProgressControl8" runat="server" CssClass="lightblue" Mode="Manual" Width="200px" />            

   6:  <mb:ProgressControl ID="ProgressControl11" runat="server" CssClass="solidblue" Mode="Manual" Width="200px" />            

And here are the CSS style rules that apply the styles for these skins

One of the sample skins I made is roughly based on the XP style progress indicator.  To create this custom skin, I first created the background image that I want to use for the indicator (I am using a 6 x 9 image)

then I use the .ajax__progress_indicator and .ajax__progress_inner classes to override the default skins height and progress image - Simple!

And here is how it looks ...

Screen shots of the Control's Features

Here are some static images that show off some of the control;s features ...

Continuous Mode

Progress indicator continuously fills the region from left to right.

Fluid Width

Progress indicator continuously fills the region from left to right.

Manual Mode - Update Absolute Percentage

Use the JavaScript API to set the percentage an absolute value

Manual Mode - Update Relative Percentage

Use the JavaScript API to set the percentage to a relative value

Skins

Use CSS to control the progress indicators look and feel

AJAX Operations

Example of displaying the indicator for AJAX operations

Modal Popup

An example using the progress control with the Tookit's ModalPopup control

That's it.  Enjoy!