loading screen

HTML

<div id="loaddiv">
<span class="bullet" id="bull1"></span>
<span class="bullet" id="bull2"></span>
<span class="bullet" id="bull3"></span>
<span class="bullet" id="bull4"></span>
<span class="bullet" id="bull5"></span>
<span class="bullet" id="bull6"></span>
<span class="bullet" id="bull7"></span>
<span class="bullet" id="bull8"></span>
</div>

CSS

.bullet {
  position: absolute;
  width: 4px; height: 4px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px; 
  border-radius: 2px;
}
#bull1 { background:#000; }
#bull2 { background:#222; }
#bull3 { background:#444; }
#bull4 { background:#666; }
#bull5 { background:#888; }
#bull6 { background:#AAA; }
#bull7 { background:#CCC; }
#bull8 { background:#EEE; }

JavaScript

var loader = document.getElementById("loaddiv");
var bullets = [
  document.getElementById("bull1"), document.getElementById("bull2"),
  document.getElementById("bull3"), document.getElementById("bull4"),
  document.getElementById("bull5"), document.getElementById("bull6"),
  document.getElementById("bull7"), document.getElementById("bull8")];
var i = 0;
var loadshow= function() {
  var x, y, j;
  loader.style.visibility = "hidden";
  for (var count = 0; count < 8; count++) {
    j = (i <= count)? i - count + 8 : i - count;
    x = 100 + 8 * Math.cos(j*Math.PI/4); y = 100 + 8 * Math.sin(j*Math.PI/4);
    bullets[count].style.left = x + "px"; bullets[count].style.top = y + "px";
  }
  loader.style.visibility = "visible";
  i = (i===7)? 0 : i + 1;
  setTimeout(loadshow, 400);  
}
window.onload = loadshow;