Ajax Loader
HTML 
<div id="box">
1
<div id="box">
2
  <div id="ball"></div>
3
  <div id="shadow"></div>
4
</div>
 
CSS 
#box {
1
#box {
2
  position: relative;
3
  margin: 20px auto;
4
  width: 500px;
5
  height: 300px;
6
}
7
 
8
#ball {
9
  z-index: 3;
10
  width: 100px;
11
  height: 100px;
12
  position: absolute;
13
  top: 0px;
14
  left: 50%;
15
  margin-left: -50px;
16
17
  background-color: #7DB8E8;
18
  background-image: -webkit-radial-gradient(10% 24%, circle, #67caff, #004469 70%);
19
  background-image: -moz-radial-gradient(10% 24%, circle, #67caff, #004469 70%);
20
  background-image: -ms-radial-gradient(10% 24%, circle, #67caff, #004469 70%);
21
  background-image: -o-radial-gradient(10% 24%, circle, #67caff, #004469 70%);
22
  background-image: radial-gradient(10% 24%, circle, #67caff, #004469 70%);
23
 
24
  -webkit-border-radius: 55px;
25
  -moz-border-radius: 55px;
26
  border-radius: 55px;
27
28
  -webkit-animation: bounce 2s 1 forwards;
29
  -moz-animation: bounce 2s 1 forwards;
30
  -ms-animation: bounce 2s 1 forwards;
31
  animation: bounce 2s 1 forwards;
32
}
33
 
34
/* ease-in is slow to fast, when the ball drops */
35
/* ease-out is fast to slow, when the ball rebounds */
36
 
37
@-webkit-keyframes bounce {
38
  0% {
39
    top: 0;
40
    -webkit-animation-timing-function: ease-in;
41
  }
42
  16% {
43
    top: 190px;
44
    -webkit-animation-timing-function: ease-out;
45
  }
46
  32% {
47
    top: 50px;
48
    -webkit-animation-timing-function: ease-in;
49
  }
50
  48% {
51
    top: 190px;
52
    -webkit-animation-timing-function: ease-out;
53
  }
54
  62% {
55
    top: 100px;
56
    -webkit-animation-timing-function: ease-in;
57
  }
58
  78% {
59
    top: 190px;
60
    -webkit-animation-timing-function: ease-out;
61
  }
62
  90% {
63
    top: 150px;
64
    -webkit-animation-timing-function: ease-in;
65
  }
66
  100% {
67
    top: 190px;
68
    -webkit-animation-timing-function: ease-out;
69
  }
70
}
71
 
72
@-moz-keyframes bounce {
73
  0% {
74
    top: 0;
75
    -moz-animation-timing-function: ease-in;
76
  }
77
  16% {
78
    top: 190px;
79
    -moz-animation-timing-function: ease-out;
80
  }
81
  32% {
82
    top: 50px;
83
    -moz-animation-timing-function: ease-in;
84
  }
85
  48% {
86
    top: 190px;
87
    -moz-animation-timing-function: ease-out;
88
  }
89
  62% {
90
    top: 100px;
91
    -moz-animation-timing-function: ease-in;
92
  }
93
  78% {
94
    top: 190px;
95
    -moz-animation-timing-function: ease-out;
96
  }
97
  90% {
98
    top: 150px;
99
    -moz-animation-timing-function: ease-in;
100
  }
101
  100% {
102
    top: 190px;
103
    -moz-animation-timing-function: ease-out;
104
  }
105
}
106
 
107
@-ms-keyframes bounce {
108
  0% {
109
    top: 0;
110
    -ms-animation-timing-function: ease-in;
111
  }
112
  16% {
113
    top: 190px;
114
    -ms-animation-timing-function: ease-out;
115
  }
116
  32% {
117
    top: 50px;
118
    -ms-animation-timing-function: ease-in;
119
  }
120
  48% {
121
    top: 190px;
122
    -ms-animation-timing-function: ease-out;
123
  }
124
  62% {
125
    top: 100px;
126
    -ms-animation-timing-function: ease-in;
127
  }
128
  78% {
129
    top: 190px;
130
    -ms-animation-timing-function: ease-out;
131
  }
132
  90% {
133
    top: 150px;
134
    -ms-animation-timing-function: ease-in;
135
  }
136
  100% {
137
    top: 190px;
138
    -ms-animation-timing-function: ease-out;
139
  }
140
}
141
 
142
@keyframes bounce {
143
  0% {
144
    top: 0;
145
    animation-timing-function: ease-in;
146
  }
147
  16% {
148
    top: 190px;
149
    animation-timing-function: ease-out;
150
  }
151
  32% {
152
    top: 50px;
153
    animation-timing-function: ease-in;
154
  }
155
  48% {
156
    top: 190px;
157
    animation-timing-function: ease-out;
158
  }
159
  62% {
160
    top: 100px;
161
    animation-timing-function: ease-in;
162
  }
163
  78% {
164
    top: 190px;
165
    animation-timing-function: ease-out;
166
  }
167
  90% {
168
    top: 150px;
169
    animation-timing-function: ease-in;
170
  }
171
  100% {
172
    top: 190px;
173
    animation-timing-function: ease-out;
174
  }
175
}
176
  
177
#shadow {
178
  position: absolute;
179
  height: 5px;
180
  width: 100px;
181
  background: rgba(0,0,0,.4);
182
  bottom: 6px;
183
  left: 50%;
184
185
  -webkit-box-shadow: 0px 0px 8px 2px rgba(0,0,0,.4);
186
  -moz-box-shadow: 0px 0px 8px 2px rgba(0,0,0,.4);
187
  box-shadow: 0px 0px 8px 2px rgba(0,0,0,.4);
188
189
  -webkit-animation: shadow 2s 1 forwards;
190
  -moz-animation: shadow 2s 1 forwards;
191
  -ms-animation: shadow 2s 1 forwards;
192
  animation: shadow 2s 1 forwards;
193
}
194
 
195
@-webkit-keyframes shadow {
196
  0% {
197
    width: 10px;
198
    -webkit-border-radius:10px/5px;
199
    margin-left: -5px;
200
    -webkit-animation-timing-function: ease-in;
201
  }
202
  16% {
203
    width: 100px;
204
    -webkit-border-radius:100px/5px;
205
    margin-left: -50px;
206
    -webkit-animation-timing-function: ease-out;
207
  }
208
  32% {
209
    width: 30px;
210
    -webkit-border-radius: 30px/5px;
211
    margin-left: -15px;
212
    -webkit-animation-timing-function: ease-in;
213
  }
214
  48% {
215
    width: 100px;
216
    -webkit-border-radius:100px/5px;
217
    margin-left: -50px;
218
    -webkit-animation-timing-function: ease-out;
219
  }
220
  62% {
221
    width: 58px;
222
    -webkit-border-radius:58px/5px;
223
    margin-left: -29px;
224
    -webkit-animation-timing-function: ease-in;
225
  }
226
  78% {
227
    width: 100px;
228
    -webkit-border-radius:100px/5px;
229
    margin-left: -50px;
230
    -webkit-animation-timing-function: ease-out;
231
  }
232
  90% {
233
    width: 80px;
234
    -webkit-border-radius:80px/5px;
235
    margin-left: -40px;
236
    -webkit-animation-timing-function: ease-in;
237
  }
238
  100% {
239
    width: 100px;
240
    -webkit-border-radius:100px/5px;
241
    margin-left: -50px;
242
    -webkit-animation-timing-function: ease-out;
243
  }
244
}
245
 
246
@-moz-keyframes shadow {
247
  0% {
248
    width: 10px;
249
    -moz-border-radius:10px/5px;
250
    margin-left: -5px;
251
    -moz-animation-timing-function: ease-in;
252
  }
253
  16% {
254
    width: 100px;
255
    -moz-border-radius:100px/5px;
256
    margin-left: -50px;
257
    -moz-animation-timing-function: ease-out;
258
  }
259
  32% {
260
    width: 30px;
261
    -moz-border-radius: 30px/5px;
262
    margin-left: -15px;
263
    -moz-animation-timing-function: ease-in;
264
  }
265
  48% {
266
    width: 100px;
267
    -moz-border-radius:100px/5px;
268
    margin-left: -50px;
269
    -moz-animation-timing-function: ease-out;
270
  }
271
  62% {
272
    width: 58px;
273
    -moz-border-radius:58px/5px;
274
    margin-left: -29px;
275
    -moz-animation-timing-function: ease-in;
276
  }
277
  78% {
278
    width: 100px;
279
    -moz-border-radius:100px/5px;
280
    margin-left: -50px;
281
    -moz-animation-timing-function: ease-out;
282
  }
283
  90% {
284
    width: 80px;
285
    -moz-border-radius:80px/5px;
286
    margin-left: -40px;
287
    -moz-animation-timing-function: ease-in;
288
  }
289
  100% {
290
    width: 100px;
291
    -moz-border-radius:100px/5px;
292
    margin-left: -50px;
293
    -moz-animation-timing-function: ease-out;
294
  }
295
}
296
 
297
@-ms-keyframes shadow {
298
  0% {
299
    width: 10px;
300
    border-radius:10px/5px;
301
    margin-left: -5px;
302
    -ms-animation-timing-function: ease-in;
303
  }
304
  16% {
305
    width: 100px;
306
    border-radius:100px/5px;
307
    margin-left: -50px;
308
    -ms-animation-timing-function: ease-out;
309
  }
310
  32% {
311
    width: 30px;
312
    border-radius: 30px/5px;
313
    margin-left: -15px;
314
    -ms-animation-timing-function: ease-in;
315
  }
316
  48% {
317
    width: 100px;
318
    border-radius:100px/5px;
319
    margin-left: -50px;
320
    -ms-animation-timing-function: ease-out;
321
  }
322
  62% {
323
    width: 58px;
324
    border-radius:58px/5px;
325
    margin-left: -29px;
326
    -ms-animation-timing-function: ease-in;
327
  }
328
  78% {
329
    width: 100px;
330
    border-radius:100px/5px;
331
    margin-left: -50px;
332
    -ms-animation-timing-function: ease-out;
333
  }
334
  90% {
335
    width: 80px;
336
    -ms-border-radius:80px/5px;
337
    margin-left: -40px;
338
    -ms-animation-timing-function: ease-in;
339
  }
340
  100% {
341
    width: 100px;
342
    border-radius:100px/5px;
343
    margin-left: -50px;
344
    -ms-animation-timing-function: ease-out;
345
  }
346
}
347
 
348
@keyframes shadow {
349
  0% {
350
    width: 10px;
351
    border-radius:10px/5px;
352
    margin-left: -5px;
353
    animation-timing-function: ease-in;
354
  }
355
  16% {
356
    width: 100px;
357
    border-radius:100px/5px;
358
    margin-left: -50px;
359
    animation-timing-function: ease-out;
360
  }
361
  32% {
362
    width: 30px;
363
    border-radius: 30px/5px;
364
    margin-left: -15px;
365
    animation-timing-function: ease-in;
366
  }
367
  48% {
368
    width: 100px;
369
    border-radius:100px/5px;
370
    margin-left: -50px;
371
    animation-timing-function: ease-out;
372
  }
373
  62% {
374
    width: 58px;
375
    border-radius:58px/5px;
376
    margin-left: -29px;
377
    animation-timing-function: ease-in;
378
  }
379
  78% {
380
    width: 100px;
381
    border-radius:100px/5px;
382
    margin-left: -50px;
383
    animation-timing-function: ease-out;
384
  }
385
  90% {
386
    width: 80px;
387
    border-radius:80px/5px;
388
    margin-left: -40px;
389
    animation-timing-function: ease-in;
390
  }
391
  100% {
392
    width: 100px;
393
    border-radius:100px/5px;
394
    margin-left: -50px;
395
    animation-timing-function: ease-out;
396
  }
397
}
 

CSS3 Bouncing Ball

CSSDeck G+