Ajax Loader
HTML 
<div id="square">
1
<div id="square">
2
  <div id="text"> Loading... </div>
3
</div>
4
<div id="square2">
5
</div>
6
<div id="square3">
7
</div>
8
<div id="square4">
9
</div>
10
<div id="square5">
11
</div>
12
<div id="square6">
13
</div>
14
<div id="square7">
15
</div>
16
<div id="square8">
17
</div>
18
<div id="square9">
19
</div>
 
CSS 
#text {
1
#text {
2
  font-family:"Avenir";
3
  color:LightCoral;
4
  padding-left:27%;
5
  padding-top:40%;
6
}
7
 
8
#square {
9
  position:absolute;
10
  margin-left:250px;
11
  margin-top:200px;
12
  width: 150px;
13
  height: 150px;
14
  background: lightblue;
15
16
17
  animation: rotate1 5s;
18
  -webkit-animation: rotate1 5s;
19
  animation-iteration-count:infinite;
20
  -webkit-animation-iteration-count:infinite;
21
  animation-direction:alternate;
22
  -webkit-animation-direction:alternate;
23
  transform-origin: 50% 50%;
24
}
25
 
26
#square2 {
27
  position:absolute;
28
  margin-left:100px;
29
  margin-top:50px;
30
  width: 150px;
31
  height: 150px;
32
  background: lightblue;
33
34
  animation: rotate1 5s;
35
  -webkit-animation: rotate1 5s;
36
  animation-iteration-count:infinite;
37
  -webkit-animation-iteration-count:infinite;
38
  animation-direction:alternate;
39
  -webkit-animation-direction:alternate;
40
  transform-origin: 50% 50%;
41
}
42
 
43
#square3 {
44
  position:absolute;
45
  margin-left:400px;
46
  margin-top:50px;
47
  width: 150px;
48
  height: 150px;
49
  background: lightblue;
50
51
  animation: rotate1 5s;
52
  -webkit-animation: rotate1 5s;
53
  animation-iteration-count:infinite;
54
  -webkit-animation-iteration-count:infinite;
55
  animation-direction:alternate;
56
  -webkit-animation-direction:alternate;
57
  transform-origin: 50% 50%;
58
}
59
 
60
#square8 {
61
  position:absolute;
62
  margin-left:400px;
63
  margin-top:350px;
64
  width: 150px;
65
  height: 150px;
66
  background: lightblue;
67
68
  animation: rotate1 5s;
69
  -webkit-animation: rotate1 5s;
70
  animation-iteration-count:infinite;
71
  -webkit-animation-iteration-count:infinite;
72
  animation-direction:alternate;
73
  -webkit-animation-direction:alternate;
74
  transform-origin: 50% 50%;
75
}
76
 
77
#square9 {
78
  position:absolute;
79
  margin-left:100px;
80
  margin-top:350px;
81
  width: 150px;
82
  height: 150px;
83
  background: lightblue;
84
85
  animation: rotate1 5s;
86
  -webkit-animation: rotate1 5s;
87
  animation-iteration-count:infinite;
88
  -webkit-animation-iteration-count:infinite;
89
  animation-direction:alternate;
90
  -webkit-animation-direction:alternate;
91
  transform-origin: 50% 50%;
92
}
93
 
94
@-webkit-keyframes rotate1 {
95
  from {
96
    -webkit-transform: rotateX(0deg) rotateY(0deg);
97
  }
98
  to{
99
    -webkit-transform: rotateX(360deg) rotateY(360deg);
100
  }
101
}
102
 
103
@keyframes rotate1 {
104
  from {
105
    transform: rotateX(0deg) rotateY(0deg);
106
  }
107
  to{
108
    transform: rotateX(360deg) rotateY(360deg);
109
  }
110
}
111
 
112
 
113
/*MARROON */
114
 
115
#square4 {
116
  position:absolute;
117
  margin-left:250px;
118
  margin-top:50px;
119
  width: 150px;
120
  height: 150px;
121
  background: LightCoral;
122
123
  animation: rotate2 5s;
124
  -webkit-animation: rotate2 5s;
125
  animation-iteration-count:infinite;
126
  -webkit-animation-iteration-count:infinite;
127
  animation-direction:alternate;
128
  -webkit-animation-direction:alternate;
129
  transform-origin: 50% 50%;
130
}
131
 
132
#square5 {
133
  position:absolute;
134
  margin-left:100px;
135
  margin-top:200px;
136
  width: 150px;
137
  height: 150px;
138
  background: LightCoral;
139
140
  animation: rotate2 5s;
141
  -webkit-animation: rotate2 5s;
142
  animation-iteration-count:infinite;
143
  -webkit-animation-iteration-count:infinite;
144
  animation-direction:alternate;
145
  -webkit-animation-direction:alternate;
146
  transform-origin: 50% 50%;
147
}
148
 
149
#square6 {
150
  position:absolute;
151
  margin-left:400px;
152
  margin-top:200px;
153
  width: 150px;
154
  height: 150px;
155
  background: LightCoral;
156
157
  animation: rotate2 5s;
158
  -webkit-animation: rotate2 5s;
159
  animation-iteration-count:infinite;
160
  -webkit-animation-iteration-count:infinite;
161
  animation-direction:alternate;
162
  -webkit-animation-direction:alternate;
163
  transform-origin: 50% 50%;
164
}
165
 
166
#square7 {
167
  position:absolute;
168
  margin-left:250px;
169
  margin-top:350px;
170
  width: 150px;
171
  height: 150px;
172
  background: LightCoral;
173
174
  animation: rotate2 5s;
175
  -webkit-animation: rotate2 5s;
176
  animation-iteration-count:infinite;
177
  -webkit-animation-iteration-count:infinite;
178
  animation-direction:alternate;
179
  -webkit-animation-direction:alternate;
180
  transform-origin: 50% 50%;
181
}
182
 
183
@-webkit-keyframes rotate2 {
184
  from {
185
    -webkit-transform: rotateY(0deg) rotateX(360deg);
186
  }
187
  to{
188
    -webkit-transform: rotateY(360deg) rotateX(0deg);
189
  }
190
}
191
 
192
@keyframes rotate2 {
193
  from {
194
    transform: rotateY(0deg) rotateX(360deg);
195
  }
196
  to{
197
    transform: rotateY(360deg) rotateX(0deg);
198
  }
199
}
 

Rotating Loading Animation (Pure CSS)

CSSDeck G+