CSS3 Spinner

an ajaxy looking spinner done with CSS3

by codecraig

HTML

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

CSS

body{
 background:#B8CBD4 url('http://f.cl.ly/items/0p3j2K223m3L1f031v2X/bgg.png') repeat;   
}

@-webkit-keyframes spinner {
  0% { opacity:1; }
  100% { opacity:.1; }}
div {
  top:50%;
  left:50%;
  width:32px;
  height:0;
  margin:-16px 0 0 -16px;
  padding-top:32px;
  position:absolute;
  overflow:hidden;
}
div * {
  position:absolute;
  width:25%;
  height:25%;
  background:rgb(93, 108, 127);
  -webkit-border-radius:16px;
  -moz-border-radius:16px;
  border-radius:16px;
  -webkit-animation:spinner 1s linear infinite;
  -webkit-box-shadow:0 1px 0 rgba(0, 0, 0, .7) inset, 0 1px 0 rgba(255, 255, 255, .7);
}
div :nth-child(1) {
  top:0;
  right:12px;
  -webkit-animation-delay:.125s;
}
div :nth-child(2) {
  top:4px;
  right:4px;
  -webkit-animation-delay:.25s;
}
div :nth-child(3) {
  top:12px;
  right:0;
  -webkit-animation-delay:.375s;
}
div :nth-child(4) {
  bottom:4px;
  right:4px;
  -webkit-animation-delay:.5s;
}
div :nth-child(5) {
  bottom:0;
  right:12px;
  -webkit-animation-delay:.625s;
}
div :nth-child(6) {
  bottom:4px;
  left:4px;
  -webkit-animation-delay:.75s;
}
div :nth-child(7) {
  bottom:12px;
  left:0;
  -webkit-animation-delay:.875s;
}
div :nth-child(8) {
  top:4px;
  left:4px;
  -webkit-animation-delay:.975s;
}