My Javascript (non-AJAX) Progress / Percentage Bar : jsProgressBarHandler 0.3.1

jsprogressbarhandlerajax.jpgA new version of jsProgressBarHandler is avaiable. Changes are a minor bugfix when handling the internal queue when animation was set to false and an update of Prototype to the latest version (1.6.0.2)

What is jsProgressBarHandler all about?

jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Version 0.1 was a mere rewrite to PrototypeJS of the version by WebAppers whilst version 0.2 was a full structural rewrite. Version 0.3 builds upon 0.2 by making it all more robust.

So, what has changed?

In version 0.3 an internal animation queuing system was introduced to jsProgressBarHandler, preventing the progressbar from freaking out when multiple simultaneous (viz. on the very same moment) calls to setPercentage() were made. With that queue jsProgressBarHandler will push all percentages on that queue, and process them one by one. Version 0.3.1 is maintenance release to fix an issue with this queue when no animation was used (the bug being that the queue wasn’t cleared properly). Credits go to Jamie Chong for spotting this one!

Anything else has changed?

Nopes, except for the fact that the jsProgressBarHandler release now sports Prototype 1.6.0.2 🙂

Cool, is there a demo?

jsProgressBarHandler Demo

TIP: At the multicolor bar at the bottom, click that -icon a few times to see the internal queue in effect 😉

Please note that next to the demo above even an AJAX demo exists!

Where can I download it?

Right here:

https://www.bram.us/wordpress;/wp-content/uploads/2008/02/jsprogressbarhandler_031.zip;Download jsProgressBarHandler 0.3.1;

WARNING! This version is outdated!
Grab the latest version over at the jsProgressBarHandler Project Page

Wow, you’re going to fast: I have a question, I need help, I need more info, how do I configure this thing?

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

3 Comments

  1. I’m attempting to use your nice progress bar in conjunction with a PHP mysql query. As it iterates through each line of the query, it gets a total percentage and then types out a tag like so:

    myJsProgressBarHandler.setPercentage(‘queryProgress’,'”.$percentage.”‘);

    This results in an error myJsProgressBarHandler is not defined. Help? I really want to use your bar, but there’s no directions anywhere on how to make it update dynamically besides those onclick actions in the source.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.