Ajax Loader
HTML 
<div class="big-circle">
1
<div class="big-circle">
2
  <div class="holder h1"><div class="little-circle c1"></div></div>
3
  <div class="holder h2"><div class="little-circle c2"></div></div>
4
  <div class="holder h3"><div class="little-circle c3"></div></div>
5
  <div class="holder h4"><div class="little-circle c4"></div></div>
6
  <div class="holder h5"><div class="little-circle c5"></div></div>
7
  <div class="holder h6"><div class="little-circle c6"></div></div>
8
  <div class="holder h7"><div class="little-circle c7"></div></div>
9
  <div class="holder h8"><div class="little-circle c8"></div></div>
10
</div>
11
 
 
CSS 
body {
1
body {
2
  background-color: #3c404b;
3
}
4
 
5
.big-circle {
6
  background-color: #FF5C00;
7
  border-radius: 50%;
8
  width: 500px;
9
  height: 500px;
10
  position: relative;
11
  left: 50%;
12
  margin-top: 25%;
13
  margin-left: -250px;
14
}
15
 
16
.holder {
17
  position: absolute;
18
  width: 500px;
19
  height: 500px;
20
}
21
 
22
.little-circle {
23
  background-color: #FFFF00;
24
  border-radius: 50%;
25
  width: 30px;
26
  height: 30px;
27
  position: absolute;
28
  top: 50%;
29
  left: 0%;
30
  margin-top: -15px;
31
  margin-left: -15px;
32
33
  -webkit-animation:move 8s linear alternate infinite;
34
  animation:move 8s linear alternate infinite;
35
}
36
 
37
.c2 {
38
  animation-delay: 1s;
39
}
40
.c3 {
41
  animation-delay: 2s;
42
}
43
.c4 {
44
  animation-delay: 3s;
45
}
46
.c5 {
47
  animation-delay: 4s;
48
}
49
.c6 {
50
  animation-delay: 5s;
51
}
52
.c7 {
53
  animation-delay: 6s;
54
}
55
.c8 {
56
  animation-delay: 7s;
57
}
58
 
59
.h2 {
60
transform:rotate(22.5deg);
61
-ms-transform:rotate(22.5deg); /* IE 9 */
62
-moz-transform:rotate(22.5deg); /* IE 9 */
63
-webkit-transform:rotate(22.5deg); /* Opera, Chrome, and Safari */
64
}
65
.h3 {
66
transform:rotate(45deg);
67
-ms-transform:rotate(45deg); /* IE 9 */
68
-moz-transform:rotate(45deg); /* IE 9 */
69
-webkit-transform:rotate(45deg); /* Opera, Chrome, and Safari */
70
}
71
.h4 {
72
transform:rotate(67.5deg);
73
-ms-transform:rotate(67.5deg); /* IE 9 */
74
-moz-transform:rotate(67.5deg); /* IE 9 */
75
-webkit-transform:rotate(67.5deg); /* Opera, Chrome, and Safari */
76
}
77
.h5 {
78
transform:rotate(90deg);
79
-ms-transform:rotate(90deg); /* IE 9 */
80
-moz-transform:rotate(90deg); /* IE 9 */
81
-webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */
82
}
83
.h6 {
84
transform:rotate(112.5deg);
85
-ms-transform:rotate(112.5deg); /* IE 9 */
86
-moz-transform:rotate(112.5deg); /* IE 9 */
87
-webkit-transform:rotate(112.5deg); /* Opera, Chrome, and Safari */
88
}
89
.h7 {
90
transform:rotate(135deg);
91
-ms-transform:rotate(135deg); /* IE 9 */
92
-moz-transform:rotate(135deg); /* IE 9 */
93
-webkit-transform:rotate(135deg); /* Opera, Chrome, and Safari */
94
}
95
.h8 {
96
transform:rotate(157.5deg);
97
-ms-transform:rotate(157.5deg); /* IE 9 */
98
-moz-transform:rotate(157.5deg); /* IE 9 */
99
-webkit-transform:rotate(157.5deg); /* Opera, Chrome, and Safari */
100
}
101
 
102
 
103
@keyframes move {
104
  /* Should be `-width`, but the background-size messses it up a little */
105
  0% {left: 0%;}
106
  5% {left: 2%;}
107
  10% {left: 5%;}
108
  90% { left: 95%; }
109
  95% {left: 98%;}
110
  100% { left: 100%; }
111
}
112
@-webkit-keyframes move {
113
  /* Should be `-width`, but the background-size messses it up a little */
114
  0% {left: 0%;}
115
  5% {left: 2%;}
116
  10% {left: 5%;}
117
  90% { left: 95%; }
118
  95% {left: 98%;}
119
  100% { left: 100%; }
120
}
 

Css3 Rolling Ball Illusion

CSSDeck G+