var progressBar;

window.onload = function(){

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

}

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");

}