Feb 11, 2009

jQuery Progress Bar

Author: gaweee | Filed under: Uncategorized
jQuery progressBar screenshot

jQuery progressBar was once upon a time an animated progress bar for jQuery. Its was based on the mootools progressBar by webappers. Now, it is, by popular demand, some funky multi-colored progress bar that starts with a THX intro and launches jQuery fireworks when it hits 100%. No not really. Check it out though!

Download the jQuery progressbar here: jQuery Progress Bar 2.0
view the demo here
read the documentation here

 

Version 2.0

After many a request to fix things up and enhance it’s functionality, we got into the mood 1 fine weekend and woke up at 3am to actually get it done! So here it is! the new version with all its new bells and whistles. Enough to qualify as a major revision. Whats been done?

  • Cleaned up the code, yes its lighter, cleaner faster. (Still lacks documentation though) :|
  • Callbacks! Everyone’s favourite
  • Max values, you can now set it to be 150/2000 instead of just a percentage
  • Text formats. Show 75/100 or 75% by toggling the textFormat accordingly
  • Steps, how many steps to get to your target value
  • Step Duration, how long each step lasts
  • Webkit (Chrome/Safari) compatibility. More like, Webkit Hacks

Once again, many a thanks for all those who have so generously provided the feature requests as well as bug fixes every now and then. And thanks for all your patience in waiting for this new release. :D
If its working for you, drop us a comment and tell us where we can see your stuff!

Version 1.2

Thanks for all the comments and feedback! By popular request i’ve added the multi-colored progress bar and fixed some bugs. The new multi-colored bar changes from red to orange and then to green at configurable intervals. Check out the demo!

Since the last update this endeavour has seen comments claiming that it works and sometimes that it doesnt. I’ve tested the demo across Safari, Opera, IE6/7, Firefox and Chrome. Havent found any problem. For those of you who have problems, please do email me the problem.

Version 1.1

This code has been downloaded quite abit so i thought i’d put in some effort to improve it. I found some free time this evening to clean up the code. The original code is a couple of months old and its my first jquery plugin. I didnt quite understand what i was doing then.I made the code less resource intensive and more configurable.

The progress bar can now be controlled externally. click on the demo link below to see what i’m talking about. I’ll know of at least 1 bug in the script if its fully tested, will try to fix this within the week. Meanwhile if you have any ideas for improvements, please leave a comment!              

Version 1.0

I really liked the mootools progressbar athttp://www.webappers.com/progressBar/ but i’m so against the idea of having 2-3 libraries in a single system. Since i always use jQuery, i tried to port the progressBar over. The problem is, jQuery unlike most of the other libraries doesnt quite work with objects. So its not that easy to return and manage an object to perform actions like “add 5%”, “fill to 95%”, etc. Honestly i’m not sure where else to use such a comprehensive progress bar other than a file upload utility.

So for what its worth, i made a simple progress bar in jQuery that parses a percentage string and animates the loading.