html - Grow square div with color based on the percentage value provided -

i working on square graph animation. squares should grow 0 on x/y axis(top left corner) determined percent size ease. can provide me hints accomplish this? have far: http://jsfiddle.net/2n6kdul4/3/

the progress happening left right. has fill left top corner right bottom corner.

var canvas = document.getelementbyid('myprogress'); var myperc = 500; ctx = canvas.getcontext('2d');  ctx.fillstyle = "rgb(255, 0, 0)"; //red  ctx.fillrect(0, 0, myperc, 100); ctx.save(); (var = 0; < (myperc * 0.5); i++) {     ctx.fillstyle = "rgb(0, 255, 0)"; //greeen     (function(i) {         settimeout(function() {             ctx.fillrect(0, 0, +i, 100);         }, 1000 * i);     })(i); } 

you can achieve animated + eased barchart using penner's easing functions , requestanimationframe timing loop

here's how:

define each of barchart bars in javascript objects:

// create bar objects , put them in bars[] array var bars=[]; var bar1={x:0,y:20,width:1,height:50,fill:'red'}; var bar2={x:0,y:100,width:1,height:50,fill:'green'}; var bar3={x:0,y:180,width:1,height:50,fill:'blue'}; bars.push(bar1,bar2,bar3); 

then can animate each bar ending width using penner's easing equations. here few of many penner easing algorithms expressed javascript functions. feed in current elapsed time, beginning value, total time duration , total value change desired during easing. penner functions return current (eased) value based on current time.

// t: elapsed time inside duration,  // b: beginning value, // d: total duration // c: total change beginning value, var easings={   linear:function(t,b,c,d){return(c*t/d+b);},   easeinquint: function(t,b,c,d){return(c*(t/=d)*t*t*t*t+b);},   easeoutquint: function (t,b,c,d){return(c*((t=t/d-1)*t*t*t*t+1)+b);}, } 

here example code , demo

the code creates reusable "animation class" can used ease property values of bar objects created above on animation duration:

var canvas=document.getelementbyid("canvas");  var ctx=canvas.getcontext("2d");  var cw=canvas.width;  var ch=canvas.height;    var animation=( function(){    // easings    // t: elapsed time through duration,     // b: beginning value,    // d: total duration    // c: total change beginning value,    var easings={      linear:function(t,b,c,d){return(c*t/d+b);},      easeinquint: function(t,b,c,d){return(c*(t/=d)*t*t*t*t+b);},      easeoutquint: function (t,b,c,d){return(c*((t=t/d-1)*t*t*t*t+1)+b);},    }    //    function animation(target,property,endingvalue,duration,easing){      this.target=target;      this.property=property;      this.endingvalue=endingvalue;      this.duration=duration;      this.easing=easing;      this.beginningvalue=target[property];      this.totalchange=endingvalue-target[property];      this.starttime=null;      this.isanimating=false;      if(easings[this.easing]==undefined){this.easing='linear';}    };    //    animation.prototype.animate=function(time){      if(time>this.starttime+this.duration){        this.target[this.property]=this.endingvalue;        this.isanimating=false;      }else{        this.target[this.property]=easings[this.easing](          time-this.starttime,this.beginningvalue,this.totalchange,this.duration        );      }        };    //    animation.prototype.run=function(){      this.target[this.property]=this.beginningvalue;      this.starttime=performance.now();      this.isanimating=true;    };    //    return(animation);  })();    // create bar objects , put them in bars[] array  var bars=[];  var bar1={x:0,y:20,width:1,height:50,fill:'red'};  var bar2={x:0,y:100,width:1,height:50,fill:'green'};  var bar3={x:0,y:180,width:1,height:50,fill:'blue'};  bars.push(bar1,bar2,bar3);    // create animations widen each bar desired  // width on 3000ms  var animations=[];  var bar1animatewidth=new animation(bar1,'width',150,3000,'easeoutquint');  var bar2animatewidth=new animation(bar2,'width',85,3000,'easeoutquint');  var bar3animatewidth=new animation(bar3,'width',250,3000,'easeoutquint');  animations.push(bar1animatewidth,bar2animatewidth,bar3animatewidth);    // start requestanimationframe loop  requestanimationframe(animate);    // initialize each animation object , start each eased animation running  doallanimations();    function doallanimations(){    for(var i=0;i<animations.length;i++){ animations[i].run(); }  }    function animate(time){      // animate property values    for(var i=0;i<animations.length;i++){      var animation=animations[i];      if(animation.isanimating){animation.animate(time);}    }      // redraw bars newly animated properties    ctx.clearrect(0,0,cw,ch);    for(var i=0;i<bars.length;i++){      var bar=bars[i];      ctx.fillstyle=bar.fill;      ctx.fillrect(bar.x,bar.y,bar.width,bar.height);    }      // request animation loop    requestanimationframe(animate);  }    $('#rerun').click(function(){ doallanimations(); });

body{ background-color: ivory; }  #canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <h4>animate easeoutquint easing</h4>  <button id=rerun>rerun</button>  <br>  <canvas id="canvas" width=300 height=300></canvas>