HTML Progressbar component

Requires JQuery to be available.

by Sascha

CSS

#progress-info {
  display: none;
}
#progress-bar {
  display: inline-block;
  width: 200px;
  height: 20px;
  border: 1px solid #666;
  margin-right: 10px;
  vertical-align: middle;
}

#percent {
  display: inline-block;
  background-color: green;
  height: 20px;
  transition: width 1s;
}

JavaScript

ProgressPresenter = function() {
  var self = this;
  
  self.init= function() {
    $('body').append('<div id="progress-info"><span id="progress-bar"><span id="percent"></span>'+
  		'</span><span id="progress-text"></span></div>');
  }
  
  self.show= function()
  {
    $('#progress-info').show("slow");
  }
  
  self.showProgress = function(percentage) {
    var p = Math.floor(percentage);
    $('#progress-text').text(p + '% loaded ...');
    $('#percent').css('width', p + '%');
  }

  self.hide= function() {
    $('#progress-info').hide("slow");
  }

}
pPresenter= new ProgressPresenter();
pPresenter.init();
pPresenter.show();
pPresenter.showProgress(45.3);
window.setTimeout(function() {
  pPresenter.showProgress(86);
  window.setTimeout(function() {
    pPresenter.showProgress(100);
  }, 2000);
}, 2000);