jQuery Progress Bar
Author: gaweee | Filed under: UncategorizedjQuery 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
textFormataccordingly - 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. ![]()
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.
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.
Most Popular
- HOWTO: PHP and jQuery upload progress bar (47)
- JQuery Progress Bar 1.1 (41)
- Howto: Repackageable custom extension development in Magento - Part 2 - Admin Controller (24)
- Howto: Repackageable custom extension development in Magento - Part 8 - CRUD - Update (13)
- HOWTO: struts 2 i18n (12)
- JQuery Progress Bar 2.0 (11)
- JQuery Progress Bar 1.2 (10)
- Howto: Repackageable custom extension development in Magento - Part 3 - Database (9)
- Howto: Repackageable custom extension development in Magento (8)
- Howto: Repackageable custom extension development in Magento - Part 5 - CRUD - Retrieve (6)
Recent Comments
- donald: Hi Wen, I have checked out
- donald: Hi Ashley, Currently, I simply use
- donald: Hi Noemi, there are many
- Serge: Thanks a lot. It's the simplest
- Zoran: Excellent posts you got here...
- Craig: Brilliant tutorial! There's NOTHING on
- Will: Thnak you! I was
- Margots: Thank you a lot for
- Aswin S: Wow great dude.. For the
- Noemi Heier: This is great! How did
Latest Entries
- jQuery Progress Bar Configuration
- Extracting email addresses from inbox
- 10 Good (Free and Legal) Source for Photos and Images
- Howto: Backup Microsoft SQL Server Database, as in Dump it to a SQL Script (like MYSQL's sqldump)
- Managing client's expectation with wireframe software
- Howto: Repackageable custom extension development in Magento - Part 9 - Frontend - List
- JQuery Progress Bar 2.0
- HOWTO: Find icons for your new prototype system
- Google Maps Helper
- laying the cornerstones
