CSS3 Spinner

lessversion.css

#spinner {
  top:50%;
  left:50%;
  width:32px;
  height:0;
  margin:-16px 0 0 -16px;
  padding-top:32px;
  position:absolute;
  overflow:hidden;
  * {
	  position:absolute;
	  width:25%;
	  height:25%;
	  background:#333;
	  -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);
	}
	:nth-child(1) {
	  top:0;
	  right:12px;
	  -webkit-animation-delay:.125s;
	}
	:nth-child(2) {
	  top:4px;
	  right:4px;
	  -webkit-animation-delay:.25s;
	}
	:nth-child(3) {
	  top:12px;
	  right:0;
	  -webkit-animation-delay:.375s;
	}
	:nth-child(4) {
	  bottom:4px;
	  right:4px;
	  -webkit-animation-delay:.5s;
	}
	:nth-child(5) {
	  bottom:0;
	  right:12px;
	  -webkit-animation-delay:.625s;
	}
	:nth-child(6) {
	  bottom:4px;
	  left:4px;
	  -webkit-animation-delay:.75s;
	}
	:nth-child(7) {
	  bottom:12px;
	  left:0;
	  -webkit-animation-delay:.875s;
	}
	:nth-child(8) {
	  top:4px;
	  left:4px;
	  -webkit-animation-delay:.975s;
	}
}

page.html

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

style.css

@-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;
}