Ajax Loader
HTML 
<div></div>
1
<div></div>
2
<div></div>
 
CSS 
body { background:black; overflow:hidden; }
1
body { background:black; overflow:hidden; }
2
div {
3
  width:300px; height:300px;
4
  border-radius:50%;
5
  position:absolute;
6
  top:50%; left:50%;
7
  margin-top:-150px; margin-left:-150px;
8
}
9
div:nth-of-type(1) { background:white; }
10
div:nth-of-type(2) {
11
  background:black;
12
  -webkit-animation:zRotate ease-in-out 1.5s infinite;
13
  animation:zRotate ease-in-out 1.5s infinite;
14
}
15
@keyframes zRotate {
16
  25% { top:25%; }
17
  50% { transform:scale(.65); }
18
  75% { top:75%; }
19
}
20
@-webkit-keyframes zRotate {
21
  25% { top:25%; }
22
  50% { -webkit-transform:scale(.65); }
23
  75% { top:75%; }
24
}
 

Rotation Illusion

CSSDeck G+