jsProgressBarHandler 0.3.3

jsprogressbarhandlerajax.jpgA new version of jsProgressBarHandler is available. Changes are two bugfixes, an update of the Prototype loading mechanism and the addition of image preloading and the support for a callback function (named onTick

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?

This release adds a few new features such as the support to preloading the used images (see extra note below) and the addition of a a callback function. This callback function (named onTick and passed in via the options Object) is called whenever the value of the progressBar has changed, allowing you – the user – to hook your own functionality to progressBars whenever a certain value is passed/reached.

An example of an onTick function would be this one:

[js]demoPB = new JS_BRAMUS.jsProgressBar(
$(‘theElementToReplace’), // the element to create the progressbar in
0, // initial percentage
{ // options
onTick : function(pbObj) { // options.onTick

switch(pbObj.getPercentage()) {

case 50:

case 95:
alert(‘Nearly full!’);

case 99:
return false;


// important to return true or counting will stop!
return true;

When the progressBar is now set to 100% (and with animation on) a warning will be shown at 50% and at 95%. Above that the 100 mark will not be reached, as false is returned at 99% (yes, it’s possible for you to break the counting/ticking from within the onTick callback). When animation is off and setPercentage is called to 100, it will immediately skip to 100%.

Regarding the preloading feature, it should be noted that after having spent several hours in all IEs (6 up to 8b2) and all other browsers I’ve decided to ditch the preloading aspect in IE, as it’s really quirky. Yes that’s correct: preloading only works in all browsers but IE (viz. it works in Firefox, Safari, Opera, …)

Next to that two bugs that were found (thank you commenters Kevin and Jack) were fixed, improving compatibility with IE and preventing a possible infinite loop.

Anything else has changed?

Internally, the code that is used to attach the progressBars to the page was moved from the window its load event to the Prototype‘s implementation of the dom:loaded event of the document. As a result the progressBars get inited faster.

Above that some extra styling options were added: the outputted percentage image now has a class percentImage and the outputted percentage text now has class percentText, allowing you to style them easily.

Whatever happened to 0.3.2?

Work on the preloading feature once started in April 2008, but was never finished (as IE decided to throw in some errors and time was short). Now – 7 months later – I found time again to work on the project and finish what I started back then. With this I decided to skip a version as the previous work already was archived as 0.3.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/11/jsprogressbarhandler_033.zip;Download jsProgressBarHandler 0.3.3;

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


  1. I have a question.
    Mostly is a progressbar used to show how far the data is uploaded. I have been playing with it but how can the progressbar be “refreshed” I mean There is a certain amount of data been read but the progressbar is not updated. On the end of reading data you can see it moving to the 100%. I understand this issue has nothing to do with the progressbar itself but to how refresh the progress bar?
    Or can I call a function from which I don’t know if exist. Further, it looks, it is: smart!

    With regards,


  2. Congratulations … code is nice !
    I have a question, I need used number decimal “10.5”
    who I do ?

  3. I included the ‘jsProgressBarHandler.js’ file in my jsp using and for some reason the bar is showing up only when I hard code the src=’contextpath’/images/… to get the image location for the boxImage and barImage properties of defaultOptions. In order to get the contextPath dynamically, I often use

    where contextPath is a hidden field in my jsp

    if the javascript in itself is in my jsp instead of include a .js file

    I had to create a global variable in my jsp javascript as

    var contextPath = ”

    and access that variable in the jsProgressBarHandler.js to make it work as follows:

    var defaultOptions =

    boxImage : contextPath + ‘/pages/javascript/jsprogressbar/images/bramus/percentImage.png’,

    barImage : contextPath + ‘/pages/javascript/jsprogressbar/images/bramus/percentImage_back.png’,


  4. Nice job on the script BTW.

    I noticed in your Ajax demo that you are simply counting the number of times Ajax update is called and then updating the bar accordingly. Is there any way that you could provide and example of how to update the progress bar using to the information pulled by the Ajax update?

    For example:
    First Ajax update: php script returns 34 (progress bar updates to 34%)
    Next ajax update: php script ruturns 37 (progress bar updates to 37%)

    A quick explanation of how to do that would be extremely helpful. 🙂

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.