progressbar.js
A Javascript UI Library
Animated progress bar control and tiny chart (sparkline)
Progress Bar Download
Progress Bar JS Progress Bar JS Progress Bar JS Progress Bar JS Progress Bar JS Progress Bar JS
Click image(s) to see demo
Basic Usage

var progressBar;

window.onload = function(){

    progressBar = new ProgressBar("my-progressbar", {'width':'100%', 'height':'3px'});
    progressBar.setPercent(60);

}

Usage

var progressBar;

window.onload = function(){

    //Create new progress bar
    progressBar = new ProgressBar("my-progressbar", {'width':'100px', 'height':'4px'});

    var oName = ProgressBar.OPTION_NAME;
    var oValue = ProgressBar.OPTION_VALUE;

    //Create new item
    barItem = {};
    barItem[oName.ITEM_ID]    = "item1";
    barItem[oName.TYPE]       = oValue.TYPE.BAR;
    barItem[oName.OPACITY]    = 0.2;
    barItem[oName.SPACE]      = 0;
    barItem[oName.ALIGN]      = oValue.ALIGN.RIGHT;
    barItem[oName.POSITION]   = oValue.POSITION.RELATIVE;
    barItem[oName.COLOR_ID]   = oValue.COLOR_ID.YELLOW;
    barItem[oName.PERCENT]    = 0;
    progressBar.createItem(barItem);

    //Change percent
    progressBar.setPercent(60, "item1");

    //Event listener: CHANGED
    progressBar.getElement().addEventListener(ProgressBar.EVENT.CHANGED, 
        function($event){
            document.getElementById('my-progressbar-text4').innerHTML = $event.detail.me.getPercent() + '%';
        });

   //Change percent after event listener
   progressBar.setPercent(80, "item1");

    //Change other options
    //progressBar.setOptionValue(oName.OPACITY, 1.0, "item1");
    //progressBar.setOptionValue(oName.SPACE, 20, "item1");
    //progressBar.setOptionValue(oName.ALIGN, oValue.ALIGN.LEFT, "item1");
    //progressBar.setOptionValue(oName.POSITION, oValue.POSITION.ABSOLUTE, "item1");
    //progressBar.setOptionValue(oName.COLOR_ID, oValue.COLOR_ID.RED, "item1");
    //progressBar.setPercent(60, "item1");

}