Colour Bar using HTML + CSS + JQuery

Colour Bar.css

.colbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 7px; /* <-- Edit this to change the height */
	
	display: table;
	table-layout: fixed;
}

.col {
	position: relative;
	display: table-cell;
	height:100%;
}

.red {
	background: #641717;
}

.blue {
	background: #173F64;
}

.green {
	background: #2B6417;
}

.yellow {
	background: #644F17;
}

.teal {
	background: #175C64;
}

Colour Bar.html

<!-- You can either just run the jquery on a given div -->

<div id="bar"></div>

<!-- Or you can hard code it... -->

<div class="colbar">
	<div class="col red"></div>
	<div class="col blue"></div>
	<div class="col green"></div>
	<div class="col yellow"></div>
	<div class="col teal"></div>
</div>

Colour Bar.js

$(function(){
	$('#bar').colourification(8); 
	// It looks really cool at 20 and 50 too! :D
});

$.fn.colourification = function(n) {
	var colours = ["red","blue","green","yellow","teal"];
	
	this.each(function() {
		$(this).addClass('colbar').empty();
		for (var i = 0; i < n; i++) {
			$(this).append('<div class="col ' + colours[i % colours.length] + '"></div>');
		}
	});
	return this;
};