diff --git a/www/css/main.css b/www/css/main.css
index d783d38..645a396 100644
--- a/www/css/main.css
+++ b/www/css/main.css
@@ -165,3 +165,18 @@ blockquote {
 	font-style:normal;
 	margin-right:3px;
 }
+
+.filebar {
+	margin: auto;
+	margin-top: 5px;
+	border-radius:5px; 
+	height: 25px;
+	width: 90%;
+
+}
+
+#bars {
+	width: 100%;
+	display: block;
+	margin-top: 10px;
+}
diff --git a/www/index.html b/www/index.html
index e7cacc6..7f4da8e 100644
--- a/www/index.html
+++ b/www/index.html
@@ -10,6 +10,7 @@
 
 		<script src='js/stage.js'></script>
 		<script src='js/util.js'></script>
+		<script src='js/bars.js'></script>
 		<script src='js/osu.js'></script>
 		<script src='js/client.js'></script>
 	</head>
@@ -111,6 +112,10 @@
 				</div>
 			</div>
 		</div>
-		<div style='margin: auto; margin-top: 5px; border-radius:5px;  background: linear-gradient(90deg, green 25%, 25%, blue 50%, 50%, red 75%); height: 25px; width: 90%;'></div>
+		<hr></hr>
+		<div id='bars'>
+
+		</div>
+		<!-- <div style='margin: auto; margin-top: 5px; border-radius:5px;  background: linear-gradient(90deg, green 25%, 25%, blue 50%, 50%, red 75%); height: 25px; width: 90%;'></div> -->
 	</body>
 </html>
diff --git a/www/js/bars.js b/www/js/bars.js
new file mode 100644
index 0000000..cd0ae9f
--- /dev/null
+++ b/www/js/bars.js
@@ -0,0 +1,59 @@
+const clamp = (p, s, e) => {
+	s = s || 0;
+	e = e || p;
+	return p < s ? s : (p > e ? e : p);
+};
+
+const spectrum = (p) => {
+	return {
+		r: clamp(1.0 - (p*2), 0, 1),
+		g: p < 0.5 ? p / 0.5 : (p-0.5),
+		b: clamp(p, 0.5, 1),
+
+		toBytes: function() {
+			var bytes = {
+				r: floor(this.r * 255),
+				g: floor(this.g * 255),
+				b: floor(this.b * 255),
+
+				toString: function() {
+					return "#"+bytes.r.toString(16)+bytes.g.toString(16)+bytes.b.toString(16);
+				}
+			};
+			return bytes;
+		}
+	};
+};
+
+const genrgb = (r,g,b) =>{ return {r: r, g: g, b: b}; };
+
+function ColouredBar(par, bars) {
+	const elem = document.createElement("div");
+
+	var str = "";
+	var pct = 0;
+
+	for(let i=0;i<bars.length;i++) {
+		const bar = bars[i];
+		pct += bar.frag;
+		str +=","+ bar.colour+" "+(pct*100)+"%"+ ((i<bars.length-1)? ", "+(pct*100)+"%":"");
+	}
+
+	elem.setAttribute("class", "filebar");
+
+	if(bars.length<1)
+		elem.style.background = "grey";
+	else
+		elem.style.background = 'linear-gradient(90deg '+str+')';
+
+	this.frags = bars;
+	this.element = elem;
+	this.parent = par;
+	par.appendChild(elem);
+}
+
+var BAR = ColouredBar.prototype;
+
+BAR.remove = function() {
+	this.element.remove();
+};
diff --git a/www/js/client.js b/www/js/client.js
index c9ea3ae..6e34cfa 100644
--- a/www/js/client.js
+++ b/www/js/client.js
@@ -300,3 +300,44 @@ global.hook("FILE_REMOVE", function(arg) {
 		else setWarn(document.getElementById(OSUFILE_DOM_PRE+i), false);
 	}
 });
+
+/// --- bars --- ///
+
+
+function osu_bar(others, osu) {
+	const part = (colour, frag) => { return {colour: colour, frag: frag}; };
+
+	var bars = [];
+
+	//TODO: Check for overlaps
+
+	return bars;
+}
+
+var OSU_BARS = {};
+
+global.hook("FILE_ADD", function(arg) {
+	const osu = arg.osu;
+	const id = arg.id;
+
+	const bar_id = "_bar_"+id;
+
+	const par = document.getElementById("bars");
+
+	OSU_BARS[bar_id] = new ColouredBar(par, osu_bar(OSU_FILES.where(x=> x && x!=osu), osu));  //[{colour: "red", frag: 0.5}, {colour: "green", frag: 0.5}]);
+	OSU_BARS[bar_id].element.setAttribute("id", bar_id);
+	//OSU_BARS[bar_id].element.innerText = osu.Shortname();
+});
+
+global.hook("FILE_REMOVE", function(arg) {
+	const osu = arg.osu;
+	const id = arg.id;
+
+	const bar_id = "_bar_"+id;
+
+	if(OSU_BARS[bar_id])
+	{
+		OSU_BARS[bar_id].remove();
+		OSU_BARS[bar_id] = undefined;
+	}
+});