ASP.NET AJAX Progress Bar Control

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.

image

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

image

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)

image

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

image

And here is how it looks ...

image

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.

image

Fluid Width

Progress indicator continuously fills the region from left to right.

image

Manual Mode - Update Absolute Percentage

Use the JavaScript API to set the percentage an absolute value

image

Manual Mode - Update Relative Percentage

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

image

Skins

Use CSS to control the progress indicators look and feel

image

AJAX Operations

Example of displaying the indicator for AJAX operations

image

Modal Popup

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

image

That's it.  Enjoy!


TrackBack

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

Comments


???????????

Very cool! Although I must mention that ASP.NET AJAX is a little too "heavy" for anything Ive been working on lately. But its certainly good to know how to do this stuff. Thanks for sharing!

Posted by: TT on May 16, 2008 12:00 AM

Excellent work, thanks.

Posted by: Chen on May 16, 2008 12:00 AM

Just simply excellent, great work!!Love your blog.

Posted by: Jakub on May 16, 2008 12:00 AM

Hi Matt,
I really like your blog. Great post. Thanks.

Posted by: Doug Rees on May 16, 2008 12:00 AM

Wow. Thats all I can say. Really excellent stuff!!!

Posted by: Doug Rees on May 16, 2008 12:00 AM

Actually, only thing I would point out is that CPU utilization is pretty large even on my high-spec laptop. around 20% for the one continuous progress bar alone which jumps to 70% if I do the modal popup as well...

Posted by: Simon on May 16, 2008 12:00 AM

Matt,

Your ideas always rock! I extended the confirm dialog that you created with the MPE a while back for a project of mine - turned out great (referenced you in the comments). The tab control you worked on turned out well, too! Ive been tinkering around with a good progress indicator in an MPE, but yours seems to be doing all I am looking for, so Ill give it a good try.

Thanks for all the hard work and the good ideas!

Posted by: Josh Haynes on May 16, 2008 12:00 AM

Hey, I was curious if you had a chance to play with the new Expression tools Microsoft has released?

Would they incorporate well with the processes you follow?

Posted by: Josh Haynes on May 16, 2008 12:00 AM

Hey, I was curious if you had a chance to play with the new Expression tools Microsoft has released?

Would they incorporate well with the processes you follow?

Posted by: Miguel Madeira on May 16, 2008 12:00 AM

Congratulations!!!
As usual... another great post.
Thanks for your contributions to the ASP.Net developers community.

Posted by: Adam on May 16, 2008 12:00 AM

Matt - Youre control looks great, and I am excited to give it a try, but..I am unable to build due to my version of AjaxControlToolKit.dll being older than the one you used. I have the latest release (3.0.20229) version up on the toolkit website. Where can I find the 3.5.11.... version you referenced?

Really nice :)

@Josh -
That thought has been in the back of mind as well. I have been meaning to compare the footprint of ASP.NET AJAX plus some of the AJCT controls versus jquery, dojo or scriptalicious. I am sure someone else has put this together, but if I cant find it I will no doubt post my findings.

@Doug Rees -
Ouch - thats not too good. I need to play around with the interval of the continuous animation to find a value that the animation stays smooth, but keeps the CPU usage minimized ...

@Simon -
Great - thanks for the feedback Simon.

@Adam -
Argh - I did that again. Somehow I downloaded a rouge version of the toolkit from codeplex. I need to refresh my bits. You should be able to download my code, remove the references to the 3.5 dll and replace it with your 3.0 one. I am planning a follow up post to this one, I will make sure I correct this issue then.

Miguel Madeira -
Thanks Miguel!

Posted by: Justin Wignall on May 21, 2008 12:00 AM

Matt,

Im not seeing the ProgressControlX_info percentage displayed in Firefox, it may just be me so I apologise if so.

Changing the line

this._info.innerText = value + %;

to

this._info.innerHTML = value + %;

in the _updatePercentage function will fix the issue, havent had too close a look to see any other knock on effects.

Posted by: Diego on May 21, 2008 12:00 AM

You are the best !!!.. thanks Matt !

Posted by: OutOfTouch on May 21, 2008 12:00 AM

Matt,

I am using the the 1.0 Ajax Control toolkit. Will this work for this example?

Regards

Posted by: chinaboy on May 22, 2008 12:00 AM

cool!

Excellent post on demonstrating the Ajax progress control! Does this work with earlier versions of Ajax toolkit?

@Josh Haynes - Not yet.

@Justin Wignall - Thanks Justin. I am working on a follow up post - I will include this fix in the new demo/download

@OutOfTouch - You will have to recompile it using AJCT 1.x. But ... I havent done this so I can guarentee you wont run into any problems. Good Luck ;)

Posted by: madfox on May 30, 2008 12:00 AM

COOL,THANKS

Posted by: mmit on June 23, 2008 12:00 AM

Hi,

First of all: Great control.

I am using it in one of my apps. It is inside a GridView in a Template column.

It renders fine but when I perform a column sort or a page change I get the follwoing error:

"Script controls may not be registered after PreRender. "

Please advice.
Thank you

Great Dude, Thanks for the hard work, I am using this in my projects.

Posted by: ronen on June 25, 2008 12:00 AM

Thanks for great control, any sample of how combining this control with a progress of an
asp:FileUpload TAG ?

TIA

Posted by: tom on June 27, 2008 12:00 AM

[…]Good site I “Stumbledupon” it today and gave it a stumble for you.. looking forward to seeing what else you have..later[…]

Posted by: zee on July 17, 2008 12:00 AM

Hi. Great control. It is very useful. I have one problem though, i have a button that runs a javascript function on the onclick event. the javascript function uses the $find(ProgressControl1).set_percentage function. It sets the percentage and then immediately goes back to 0 as per default set on the control. How do i overcome this?

this is good, i lookr for a long time

Posted by: diegog on August 6, 2008 10:05 AM

Thanks Matt !!, you rock ths house !!!, you ideas are great, i've 2 comments for you:

1) This example will be fantastic in .net 2.0, due to developers like me use this plattaform yet.

2) Your controls will be fantastic (Plus !!!), if we had a .net 2.0 and 3.5 version.

That's all dude .. Thanks again

this is good,Thanks for the hard work

Posted by: dhanabalanr on August 16, 2008 09:27 AM

Matt,
Thanks for your valuable hard work you've done for us.

I'm using .net 2.0 and ajax 1.0. Could you help to me convert this into .net 2.0??

Can I use this toolkit for asp.net 2.0

Posted by: JCard on August 26, 2008 12:20 PM

Matt,

As everyone else already said, excellent job. Definitely appreciate the work you put into this.

Is there anyway to change the color of the percentage font?? It seems like I've tried everything. If I'm overlooking something simple and dumb please let me know! :)

Posted by: Oystein on September 2, 2008 08:02 AM

Matt, great job!

Just one thing. I have a long process in a function on a button click event in the code behind C#. How can I update the progress bar in a modal popup using your control? I have a set number of iterations I go through in my function, so it would be perfect to show the actual progress in percent.

Sincerely,

- Oystein -

Posted by: Frank on September 13, 2008 07:50 AM

Nice control, but it is too slow in a gridview with more than 20 items. I want to use this control to show the status of a particular task however rendering is very slow.

Wow,

It is brilliant. Just yesterday i have posted a blog in my site regarding progress bar. But i have not used ajax in built component instead used Dynamic HTML and XMLHttp Request object to update th progress status.

Thank you , this is intresting.


Cheers,
Srinivas

Posted by: Darcy on October 15, 2008 04:21 AM

Hi Matt,

THis progressbar is really nice. Only, is there a way you can provide download that is compiled with AJAX 1.0.20229.20821 library instead? I don't use AJAX or 3.5 framework yet. I would really appreciate if you can give me the progress bar download that uses ajax 1.0.

Thanks,
Darcy

Just one thing. I have a long process in a function on a button click event in the code behind C#. How can I update the progress bar in a modal popup using your control? I have a set number of iterations I go through in my function, so it would be perfect to show the actual progress in percent.

Posted by: Cassini on October 29, 2008 12:04 PM

Frankly without being able to send the progress information from serer-side code to this control it does not deserve to call it ajax progress control.

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

  • Cassini wrote: Frankly without being able to send the progress information from serer-side code to this control it ...
  • wow gold wrote: Just one thing. I have a long process in a function on a button click event in the code behind C#. H...
  • Darcy wrote: Hi Matt, THis progressbar is really nice. Only, is there a way you can provide download that is com...
  • srinivas wrote: Wow, It is brilliant. Just yesterday i have posted a blog in my site regarding progress bar. But i ...
  • Frank wrote: Nice control, but it is too slow in a gridview with more than 20 items. I want to use this control t...
  • Oystein wrote: Matt, great job! Just one thing. I have a long process in a function on a button click event in the...
  • JCard wrote: Matt, As everyone else already said, excellent job. Definitely appreciate the work you put into thi...
  • swarna wrote: Can I use this toolkit for asp.net 2.0...