140byt.es loading spinner (cross-browser)

HTML

<body>
<div id="spinner"></div>
</body>

CSS

#spinner { position: relative; font-size: 22px; }
#spinner b { 
  position:absolute;
  display: block;
  -webkit-transform-origin: 50% 0;
  top: 50px;
  left: 20px;
}

#spinner b>i {
  display: block;
  background:#000;
  width:4px;
  height: 9px;
  border-radius:40px;
  text-indent: -999em;
  margin: 16px 0 0 0;
}
#spinner .b0 { top:00px; left:20px; }
#spinner .b1 { top:03px; left:27px; -webkit-transform:rotate(45deg); }
#spinner .b2 { top:10px; left:30px; -webkit-transform:rotate(90deg); }
#spinner .b3 { top:17px; left:27px; -webkit-transform:rotate(135deg); }
#spinner .b4 { top:20px; left:20px; -webkit-transform:rotate(180deg); }
#spinner .b5 { top:17px; left:13px; -webkit-transform:rotate(225deg); }
#spinner .b6 { top:10px; left:09px; -webkit-transform:rotate(270deg); }
#spinner .b7 { top:03px; left:13px; -webkit-transform:rotate(315deg); }
#spinner .o0 { opacity: 0.8; _color: #666; }
#spinner .o1 { opacity: 0.7; _color: #777; }
#spinner .o2 { opacity: 0.6; _color: #888; }
#spinner .o3 { opacity: 0.5; _color: #999; }
#spinner .o4 { opacity: 0.4; _color: #aaa; }
#spinner .o5 { opacity: 0.3; _color: #ccc; }
#spinner .o6 { opacity: 0.2; _color: #ddd; }
#spinner .o7 { opacity: 0.1; _color: #eee; }

JavaScript

(
function(a,b,c){setInterval(function(){for(b=0;b<8;c||(a.innerHTML+='<b><i>•'),a.childNodes[b].className='b'+b+' o'+(++b-~c)%8);c=-~c},99)}
)(document.getElementById('spinner'));