jQuery Progress Bar
Author: gaweee | Filed under: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
this software is release under the BSD license.
Version 2.01
Minor bugfixes.
- Added a parseInt to critical numeric variables to prevent doofuses (yes plural) from using string inputs on these fields
- Fixed a fraction display bug when using really small numbers
Features i hope to be adding soon
- Animation bypass
- Stop/Reset feature.
For the time being, stop is really easy to accomplish just set the value to the running value and that will work i suppose. Reset? Track your original value and do the same
Feature requests we’re ignoring
- Adding in overflow messages after 100%.
Thats really really easy to edit in the original JS file and the use case is not varied enough to warrant commiting into this main code
Thanks for the community feedback. Appreciate the bug patches that you guys have sent in. Thanks!
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 (56)
- JQuery Progress Bar 1.1 (53)
- Howto: Repackageable custom extension development in Magento - Part 2 - Admin Controller (25)
- JQuery Progress Bar 2.0 (21)
- Howto: Repackageable custom extension development in Magento - Part 8 - CRUD - Update (18)
- HOWTO: struts 2 i18n (16)
- Howto: Repackageable custom extension development in Magento (12)
- JQuery Progress Bar 1.2 (11)
- Howto: Repackageable custom extension development in Magento - Part 9 - Frontend - List (10)
- Howto: Repackageable custom extension development in Magento - Part 3 - Database (9)
Recent Comments
- Karen: Great work around-thank you!!
- Sheldon: awesome possum!
- cmstop里所使用的有用的jquery插件 » Terry's Blog: [...] http://t.wits.sg/jquery-progress-bar/ 这篇日志的 t.cn [...]
- Lakshyami: Hi, Thank you very much for
- New site feature: User Poll « TechnoStripe: [...] progress bar used to
- seo agentur: @Krish Why do you need to
- 2kai: Hi Aromal, you need to flush
- Rob Rasner Magic Castle: I love what you guys
- รับทำเว็บไซต์: Thx for this. Nice and
- Lexus: ESxtYC I'm not easily impressed.
Latest Entries
- SD in the Community: Product Management Panel Recap
- Mac OS X and Ricoh Aficio C2051 - Making Printing "Just Work"
- How to impress your recruiter
- Thoughts on Attracting the attention of the Best Hires
- The Greg Syndrome
- The Parental Manager
- Attack of the Facebook Harvesters
- jQuery Progress Bar Configuration
- Extracting email addresses from inbox
- 10 Good (Free and Legal) Source for Photos and Images
