Continuous Color Transition

Like the one in Windows 8 installation, We're getting your PC ready.

by Noreh AD

HTML

<div id="graph-container">
	<table id="graph">
		<tr>
			<td>
				<div class="bar" id="rBar">
					<div class="fill" id="rFill"></div>
					<div class="target-line" id="rTarget"></div>
				</div>
			</td>
			<td>
				<div class="bar" id="gBar">
					<div class="fill" id="gFill"></div>
					<div class="target-line" id="gTarget"></div>
				</div>
			</td>
			<td>
				<div class="bar" id="bBar">
					<div class="fill" id="bFill"></div>
					<div class="target-line" id="bTarget"></div>
				</div>
			</td>
		</tr>
		<tr>
			<td class="current">0</td>
			<td class="current">0</td>
			<td class="current">0</td>
		</tr>
	</table>
	<table id="stats">
		<tr>
			<td>Previous</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>Next</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>Distance</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>Increment</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</div>

<input type="button" value="Pause" id="playPause" />

CSS

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background: white;
}
#graph-container {
	display: table;
	margin: 10px;
	font-family: consolas;
	font-size: 13px;
	background-color: rgba(255,255,255,.8);
	box-shadow: 1px 1px 2px rgba(0,0,0,.2);
}
table {
	float: left;
	border-collapse: collapse;
	margin: 10px;
}
table:last-child {
	margin-left: 0;
}
.bar {
	height: 100px;
	width: 25px;
	position: relative;
}
.fill {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
}
#rBar	{ background: rgba(255,0,0,.1); }
#gBar	{ background: rgba(0,255,0,.1); }
#bBar	{ background: rgba(0,0,255,.1); }
#rFill	{ background: rgba(255,0,0,.4); }
#gFill	{ background: rgba(0,255,0,.4); }
#bFill	{ background: rgba(0,0,255,.4); }
.target-line {
	width: 100%;
	border-top: 1px dotted rgba(0,0,0,.4);
	position: absolute;
	bottom: 0;
	height: 0;
}
.current { text-align: center; }
#stats td {
	line-height: 1.8;
	padding: 2px;
	min-width: 28px;
	border-bottom: 1px dotted rgba(0,0,0,.1);
}
#stats td:nth-child(1) { color: rgba(0,0,0,.5); }
#stats td:nth-child(2),
#stats td:nth-child(3),
#stats td:nth-child(4) { text-align: right; }
input {
	margin-left: 10px;
	padding: 5px 10px;
}

JavaScript

/* ==================== Graph ==================== */
var graph = {
  cont 	: document.getElementById("graph-container"),
  table 	: document.getElementById("graph"),
  stats 	: document.getElementById("stats").tBodies[0],
  fills	: document.getElementsByClassName("fill"),
  targets	: document.getElementsByClassName("target-line"),
  cells	: {
    currentColor : document.getElementsByClassName("current"),
    prevColor	 : [],
    nextColor	 : [],
    distance	 : [],
    increment	 : [],
  },
  getCells : function() {
    for (var j = 1; j < 4; j++) {
      graph.cells.prevColor.push(graph.stats.rows[0].cells[j]);
      graph.cells.nextColor.push(graph.stats.rows[1].cells[j]);
      graph.cells.distance.push(graph.stats.rows[2].cells[j]);
      graph.cells.increment.push(graph.stats.rows[3].cells[j]);
    }
  },
  visible : function() {
    var container = document.getElementById("graph-container");
    if (container && container.style.display != "none") {
      return true;
    }
    return false;
  },
  updateStats : function() {
    if (graph.visible()) {
      for (var i = 0; i < 3; i++) {
        graph.cells.prevColor[i].innerHTML	  = currentColor[i];
        graph.cells.currentColor[i].innerHTML = currentColor[i];
        graph.cells.nextColor[i].innerHTML	  = targetColor[i];
        graph.cells.distance[i].innerHTML	  = distance[i];
        graph.cells.increment[i].innerHTML	  = increment[i];
      }
    }
  },
  updateTargetLines : function() {
    if (graph.visible()) {
      for (var i = 0; i < graph.targets.length; i++) {
        var percent = Math.floor(targetColor[i] / 255 * 100);
        graph.targets[i].style.height = percent + "px";
      }
    }
  },
  updateCurrentColor : function() {
    if (graph.visible()) {
      for (var i = 0; i < currentColor.length; i++) {
        graph.cells.currentColor[i].innerHTML = currentColor[i];
      }
    }
  },
  updateFills : function() {
    if (graph.visible()) {
      for (var i = 0; i < graph.fills.length;...