function DeLight(dly,clr,eq)
{
setTimeout(function(){
$('li:eq('+eq+')').find('div').css('background',clr);
},dly);
}
DeLight(100,'orange',0);
DeLight(200,'purple',1);
DeLight(300,'black',2);
DeLight(400,'blue',3);
DeLight(500,'green',4);
DeLight(600,'#fff',4);
DeLight(700,'#fff',3);
DeLight(800,'#fff',2);
DeLight(900,'#fff',1);
DeLight(1000,'#fff',0);
DeLight(1100,'orange',0);
DeLight(1200,'purple',1);
DeLight(1300,'black',2);
DeLight(1400,'blue',3);
DeLight(1500,'green',4);
DeLight(1600,'#fff',4);
DeLight(1700,'#fff',3);
DeLight(1800,'#fff',2);
DeLight(1900,'#fff',1);
DeLight(2000,'#fff',0);
DeLight(2100,'orange',0);
DeLight(2200,'purple',1);
DeLight(2300,'black',2);
DeLight(2400,'blue',3);
DeLight(2500,'green',4);
DeLight(2600,'#fff',4);
DeLight(2700,'#fff',3);
DeLight(2800,'#fff',2);
DeLight(2900,'#fff',1);
DeLight(3000,'#fff',0);
DeLight(3100,'orange',0);
DeLight(3200,'purple',1);
DeLight(3300,'black',2);
DeLight(3400,'blue',3);
DeLight(3500,'green',4);
DeLight(3600,'#fff',4);
DeLight(3700,'#fff',3);
DeLight(3800,'#fff',2);
DeLight(3900,'#fff',1);
DeLight(4000,'#fff',0);
<ul>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
* { margin: 0; padding: 0; }
ul { list-style: none; }
ul li { float: left; }
li div {
width: 10px;
height: 10px;
background: #fff;
}