fiddle.css

progress {
	display: block;
}

.winner {
	background-color: lime;
}

fiddle.html

<progress class="racer1" value="0"></progress>
<progress class="racer2" value="0"></progress>

fiddle.js

var Racer = function() {};
Racer.prototype = {
	position: 0,
	move: function(scale) {
		if(scale === undefined) {
			scale = 1;
		}
		var distance = Math.random();
		this.position += distance * scale;
		return this.position;
	}
};

document.addEventListener('DOMContentLoaded', function() {
	var racer1 = new Racer();
	var racer2 = new Racer();
	var racer1Progress = document.querySelector('progress.racer1');
	var racer2Progress = document.querySelector('progress.racer2');
	
	var stepScale = 1 / 100;
	
	var step = window.setInterval(function() {
		racer1Progress.value = racer1.move(stepScale);
		racer2Progress.value = racer2.move(stepScale);
		
		if(racer1Progress.position >= 1) {
			racer1Progress.classList.add('winner');
			window.clearInterval(step);
		}
		if(racer2Progress.position >= 1) {
			racer2Progress.classList.add('winner');
			window.clearInterval(step);
		}
	}, 10);
});

fiddle.manifest

name: "Racers"

http://jsfiddle.net/gh/gist/library/pure/5474399/