HTML5でいうmeterタグみたいなもの。完璧ゴミ扱い。

JavaScript 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<body>

<div id="line1" style="width:600px; height:20px;border:1px solid;">&nbsp</div>
<div id="line2" style="width:600px; height:40px;border:1px solid;">&nbsp</div>
<div id="line3" style="width:600px; height:60px;border:1px solid;">&nbsp</div>

<script type="text/javascript">

// Timer________
var Timer = function () {
  this.setTimer.apply( this, arguments );
};


//繰り返しの設定
Timer.prototype.setTimer = function ( cbFunc, mms ) {
  this.interval = mms;
  this.timerId  = null;
  if( 'function' === typeof cbFunc )
    this.cbFunc = cbFunc;
  else
    this.cbFunc = null;
};


//スタート
Timer.prototype.start = function ( cbFunc ) {
  if( 'function' === typeof cbFunc ) {
    this.cbFunc = cbFunc;
  }
  return this.timerId = setInterval(
    (function(that) {
      return function() {
        that.loop();
      };
    })(this), this.interval );
};


//ストップ
Timer.prototype.stop = function ( ) {
  if( this.timerId ) {
    clearInterval( this.timerId );
    this.timerId = null;
    return true;
  }
  return false;
};

//繰り返し行われる。もし関数がtrueを返したら中断できる
//ただし、中止した場合、呼び出し元に連絡していない
Timer.prototype.loop = function ( ) {
  this.cbFunc() && this.stop();
};


var Meter = function ( ) {
  this.init.apply( this, arguments );
};

Meter.prototype.init = function ( targetId, bgcolor, percent, text, cssText ) {
  var e = document.getElementById( targetId );
  var m, t;
  
  while( e.hasChildNodes() )
    e.removeChild( e.lastChild );
  
  this.max = e.clientWidth;

  e.style.overflow = 'hidden';
  e.style.padding = 0 + '';
  
  m = document.createElement( 'DIV' );
  cssText && (m.style.cssText = cssText);
  m.style.overflow = 'hidden';
  m.style.height = e.clientHeight + 'px';
  m.style.backgroundColor = bgcolor;
  t = document.createTextNode( text || '' );
  m.appendChild( t );
  e.appendChild( m );
  this.m = m;
  this.setPercent( percent, text, cssText );
};

Meter.prototype.setPercent = function ( percent, text ) {
  if( !percent || 0 > percent ) percent = 0;
  if( this.max < percent ) percent = this.max;
  this.percent = percent;
  this.m.style.width = ((this.max / 100 * percent) | 0) + 'px';
  if( 'undefined' !== typeof text ) this.m.firstChild.nodeValue = text;

};

Meter.prototype.getPercent = function ( ) {
  return this.percent;
};


var Hoge = function (targetId, bgcolor, start, text, cssText) {
  this.cnt = start;
  this.meter = new Meter( targetId, bgcolor, start, text, cssText );
};

Hoge.prototype.func = function ( ) {
  return (this.cnt += 2) > 100 ? true: (this.meter.setPercent( this.cnt, this.cnt + '%' ), 0);
};

var line1 = new Hoge( 'line1', '#f00', 0, 'textpyon', 'color:#ff0;' );
var line2 = new Hoge( 'line2', '#0f0', 0, 'textpyon', 'color:#0ff;' );
var line3 = new Hoge( 'line3', '#00f', 0, 'textpyon', 'color:#fff;' );

new Timer( (function(that){return function(){ return that.func(); }; })(line1), 30).start() ;
new Timer( (function(that){return function(){ return that.func(); }; })(line2), 50).start() ;
new Timer( (function(that){return function(){ return that.func(); }; })(line3), 70).start() ;

</script>