Ajax Loader
HTML 
<p><a href="#"><span class="highlight"></span></a></p>
1
<p><a href="#"><span class="highlight"></span></a></p>
2
<span class="shadow"></span>
 
CSS 
body {
1
body {
2
  padding: 1px;
3
  height: 400px;
4
}
5
 
6
p {
7
  margin: 220px 0 0 0;
8
  -webkit-transform: scale(0.5, 0.5);
9
  -moz-transform: scale(0.5, 0.5);
10
  -ms-transform: scale(0.5, 0.5);
11
  -o-transform: scale(0.5, 0.5);
12
  transform: scale(0.5, 0.5);
13
14
  -webkit-animation: jump 1s infinite;
15
  -moz-animation: jump 1s infinite;
16
  -ms-animation: jump 1s infinite;
17
  -o-animation: jump 1s infinite;
18
  animation: jump 1s infinite;
19
}
20
 
21
p::before {
22
  content: '';
23
  position: absolute;
24
  top: 45%;
25
  left: 50%;
26
  
27
  -webkit-transform: rotate(-25deg) scaleY(1.8) translate(-112px,-70px);
28
    -moz-transform: rotate(-25deg) scaleY(1.8) translate(-112px,-70px);
29
    -o-transform: rotate(-25deg) scaleY(1.8) translate(-112px,-70px);
30
    -ms-transform: rotate(-25deg) scaleY(1.8) translate(-112px,-70px);
31
    transform: rotate(-25deg) scaleY(1.8) translate(-112px,-70px);
32
33
  z-index: 1;
34
    width: 160px;
35
    height: 160px;
36
  
37
  -webkit-border-radius: 92px;
38
  -moz-border-radius: 92px;
39
  border-radius: 92px;
40
41
  border: 12px solid #ce4075;
42
 
43
}
44
 
45
p::after {
46
  content: '';
47
  position: absolute;
48
  top: 45%;
49
  left: 50%;
50
    width: 184px;
51
    height: 184px;
52
53
    -webkit-border-radius: 212px;  
54
  -moz-border-radius: 212px;
55
    border-radius: 212px;
56
  
57
  border: 120px solid #fff;
58
    margin: -212px 0 0 -212px;
59
    pointer-events: none;
60
    z-index: 2;
61
}
62
 
63
a {
64
  top: 45%;
65
  left: 50%;
66
  position: absolute;
67
    text-indent:-8000px;
68
    margin:-92px 0 0 -92px;
69
    background: #f26398;
70
    width:160px;
71
    height:160px;
72
73
  -webkit-border-radius: 92px;
74
  -moz-border-radius: 92px;
75
  border-radius: 92px;
76
77
    border:12px solid #ce4075;
78
}
79
 
80
a::before {
81
  content: '';
82
  position: absolute;
83
    top:-110px;
84
    left:-50px;
85
86
    -webkit-transform:rotate(-10deg) scaleX(1.5);
87
    -moz-transform:rotate(-10deg) scaleX(1.5);
88
    -o-transform:rotate(-10deg) scaleX(1.5);
89
    -ms-transform:rotate(-10deg) scaleX(1.5);
90
    transform:rotate(-10deg) scaleX(1.5);
91
92
    z-index: 1;
93
    width:160px;
94
    height:160px;
95
96
  -webkit-border-radius: 92px;
97
  -moz-border-radius: 92px;
98
  border-radius: 92px;
99
100
    border:12px solid #ce4075;
101
}
102
 
103
a::after {
104
  content: '';
105
  position: absolute;
106
    top:75px;
107
    left:30px;
108
109
    -webkit-transform:rotate(-10deg) scaleX(1.2);
110
    -moz-transform:rotate(-10deg) scaleX(1.2);
111
    -o-transform:rotate(-10deg) scaleX(1.2);
112
    -ms-transform:rotate(-10deg) scaleX(1.2);
113
    transform:rotate(-10deg) scaleX(1.2);
114
    transform:rotate(-10deg) scaleX(1.2);
115
116
    width:160px;
117
    height:160px;
118
  
119
  -webkit-border-radius: 92px;
120
  -moz-border-radius: 92px;
121
  border-radius: 92px;
122
 
123
    border:12px solid #ce4075;
124
}
125
 
126
span.highlight {
127
  background: #fba0c1;
128
  width: 120px;
129
  height: 80px;
130
  position: absolute;
131
  left: 22px;
132
  top: 8px;
133
  
134
  -webkit-border-radius: 50%;
135
  -moz-border-radius: 50%;
136
  border-radius: 50%;
137
 
138
  z-index: 0;
139
}
140
 
141
span.shadow {
142
  width: 90px;
143
  height: 0px;
144
  background: rgba(0,0,0,0.3);
145
  position: absolute;
146
  top: 265px;
147
  z-index: 3;
148
  left: 50%;
149
  margin-left: -45px;
150
151
  -webkit-border-radius: 50%;
152
  -moz-border-radius: 50%;
153
  border-radius: 50%;
154
155
  -webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.5);
156
  -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.5);
157
  box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.5);
158
159
  -webkit-animation: shrink 1s infinite;
160
  -moz-animation: shrink 1s infinite;
161
  -ms-animation: shrink 1s infinite;
162
  -o-animation: shrink 1s infinite;
163
  animation: shrink 1s infinite;
164
}
165
 
166
@-webkit-keyframes jump {
167
  0% {margin-top: 50px; -webkit-transform: scale(0.5,0.5);
168
    -webkit-animation-timing-function: ease-in;
169
  }
170
  40% {-webkit-transform: scale(0.5,0.5)}
171
  50% {margin-top: 220px; -webkit-transform: scale(0.5,0.35);
172
    -webkit-animation-timing-function: ease-out;
173
  }
174
  60% {-webkit-transform: scale(0.5,0.5)}
175
  100% {margin-top: 50px; -webkit-transform: scale(0.5,0.5);
176
    -webkit-animation-timing-function: ease-in;
177
  }
178
}
179
 
180
@-webkit-keyframes shrink {
181
  0% {width: 60px; margin-left: -30px;
182
    -webkit-animation-timing-function: ease-in;
183
  }
184
  50% {width: 90px; margin-left: -45px;
185
    -webkit-animation-timing-function: ease-out;
186
  }
187
  100% {width: 60px; margin-left: -30px;
188
    -webkit-animation-timing-function: ease-in;
189
  }
190
}
191
 
192
@-moz-keyframes jump {
193
  0% {margin-top: 50px; -moz-transform: scale(0.5,0.5);
194
    -moz-animation-timing-function: ease-in;
195
  }
196
  40% {-moz-transform: scale(0.5,0.5)}
197
  50% {margin-top: 220px; -moz-transform: scale(0.5,0.35);
198
    -moz-animation-timing-function: ease-out;
199
  }
200
  60% {-moz-transform: scale(0.5,0.5)}
201
  100% {margin-top: 50px; -moz-transform: scale(0.5,0.5);
202
    -moz-animation-timing-function: ease-in;
203
  }
204
}
205
 
206
@-moz-keyframes shrink {
207
  0% {width: 60px; margin-left: -30px;
208
    -moz-animation-timing-function: ease-in;
209
  }
210
  50% {width: 90px; margin-left: -45px;
211
    -moz-animation-timing-function: ease-out;
212
  }
213
  100% {width: 60px; margin-left: -30px;
214
    -moz-animation-timing-function: ease-in;
215
  }
216
}
217
 
218
@-ms-keyframes jump {
219
  0% {margin-top: 50px; -ms-transform: scale(0.5,0.5);
220
    -ms-animation-timing-function: ease-in;
221
  }
222
  40% {-ms-transform: scale(0.5,0.5)}
223
  50% {margin-top: 220px; -ms-transform: scale(0.5,0.35);
224
    -ms-animation-timing-function: ease-out;
225
  }
226
  60% {-ms-transform: scale(0.5,0.5)}
227
  100% {margin-top: 50px; -ms-transform: scale(0.5,0.5);
228
    -ms-animation-timing-function: ease-in;
229
  }
230
}
231
 
232
@-ms-keyframes shrink {
233
  0% {width: 60px; margin-left: -30px;
234
    -ms-animation-timing-function: ease-in;
235
  }
236
  50% {width: 90px; margin-left: -45px;
237
    -ms-animation-timing-function: ease-out;
238
  }
239
  100% {width: 60px; margin-left: -30px;
240
    -ms-animation-timing-function: ease-in;
241
  }
242
}
243
 
244
@-o-keyframes jump {
245
  0% {margin-top: 50px; -o-transform: scale(0.5,0.5);
246
    -o-animation-timing-function: ease-in;
247
  }
248
  40% {-o-transform: scale(0.5,0.5)}
249
  50% {margin-top: 220px; -o-transform: scale(0.5,0.35);
250
    -o-animation-timing-function: ease-out;
251
  }
252
  60% {-ms-transform: scale(0.5,0.5)}
253
  100% {margin-top: 50px; -o-transform: scale(0.5,0.5);
254
    -o-animation-timing-function: ease-in;
255
  }
256
}
257
 
258
@-o-keyframes shrink {
259
  0% {width: 60px; margin-left: -30px;
260
    -o-animation-timing-function: ease-in;
261
  }
262
  50% {width: 90px; margin-left: -45px;
263
    -o-animation-timing-function: ease-out;
264
  }
265
  100% {width: 60px; margin-left: -30px;
266
    -o-animation-timing-function: ease-in;
267
  }
268
}
269
 
270
@keyframes jump {
271
  0% {margin-top: 50px; transform: scale(0.5,0.5);
272
    animation-timing-function: ease-in;
273
  }
274
  40% {transform: scale(0.5,0.5)}
275
  50% {margin-top: 220px; transform: scale(0.5,0.35);
276
    animation-timing-function: ease-out;
277
  }
278
  60% {-ms-transform: scale(0.5,0.5)}
279
  100% {margin-top: 50px; transform: scale(0.5,0.5);
280
    animation-timing-function: ease-in;
281
  }
282
}
283
 
284
@keyframes shrink {
285
  0% {width: 60px; margin-left: -30px;
286
    animation-timing-function: ease-in;
287
  }
288
  50% {width: 90px; margin-left: -45px;
289
    animation-timing-function: ease-out;
290
  }
291
  100% {width: 60px; margin-left: -30px;
292
    animation-timing-function: ease-in;
293
  }
294
}
 

Bouncing Basketball with CSS

CSSDeck G+