Progress

by meo

HTML

<div id="progress"></div>
<div class="subProgress">
  <div id="subProg1"><div class="prog"></div></div>
  	<div id="subProg2"><div class="prog"></div></div>
  	<div id="subProg3"><div class="prog"></div></div>
</div>

CSS

#progress {
	background: red;
    height: 2px;
  	margin: 10px 0;
}

.subProgress > div {
	float: left;
    margin: 10px 0;
}

.prog {
  height: 2px;
  background: rgba(0,0,0,.6);
  width: 0;
}

#subProg1 {
	width: 60%;
	background: orange;
}
#subProg2 {
	width: 10%;
    background: purple;
}
#subProg3 {
	width: 30%;
    background: yellow;
}

JavaScript

Progress = function(){
	this.$progressBar = null;
    this.progress = 0; /* 0 - 1 */
	this.children = []; /* can have multiple subprogresses */
};

Progress.prototype.calculateSubprogress = function(){
	var childs = this.children;
	if( childs.length ) {
		var i;
		for(i=0;i<childs.length;i++){
		
        }
	}else{
		return progress;
	}
};

Progress.prototype.convertProgress = function(val,from,to) {
  	var f, t, i, match, st = 0, st2 = 0;
  
    for(i=0;i<from.length;i++){
    	st += from[i];
    	st2 += to[i];
            
        match = i;
            
        if(val <= st){
        	st -= from[i];
            st2 -= to[i]
            break;
         }
    }
    
    t = (val - st) / from[match];
    
    return st2 + (t * to[match]);
};


Progress.prototype.setProgress = function( val ){
	this.progress = val;
    return val;
};

Progress.prototype.bindToDom = function( $progressBar ){
	this.$progressBar = $progressBar && $progressBar.length ? $progressBar : $("<div>");
};

Progress.prototype.renderProgress = function(){
  	this.$progressBar.width( (this.progress * 100) + "%" );
};

Progress.prototype.addSubProgress = function( subProgress ){
	this.children.push( subProgress );
    return this.children;
};



var P = new Progress();

P.setProgress(0);
P.bindToDom( $("#progress") );
P.renderProgress();

var sP1 = new Progress();

P.addSubProgress( sP1 );

console.log( P.convertProgress(0.9,[.58,.28,.14],[.33,.33,.33]) );

sP1.bindToDom( $("#subProg1 .prog") );
sP1.setProgress(0.45);
sP1.renderProgress();



var i = 0;

setInterval(function(){
    i += 0.01;
  	if( i < 1.01 ){
		P.setProgress( i );
    	P.renderProgress();
    }
},1000);