Ajax Loader
HTML 
<div class="ball-wrapper">
1
<div class="ball-wrapper">
2
    <div class="ball"></div>
3
    <div class="ball-shadow"></div>
4
</div>
 
CSS 
body { background-color: #DDDDDD; font: 30px sans-serif; height: 350px;}
1
body { background-color: #DDDDDD; font: 30px sans-serif; height: 350px;}
2
 
3
 
4
.ball-wrapper {
5
    position: fixed;
6
    width: 120px;
7
    height: 300px;
8
    margin-left: -60px;
9
    left: 50%;
10
    top: 20%;
11
}
12
 
13
.ball {
14
    position: absolute;
15
    width: 120px;
16
    height: 120px;
17
    border-radius: 70px;
18
    background: -webkit-linear-gradient(top,  rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
19
    background: -moz-linear-gradient(top,  rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
20
    background: linear-gradient(top,  rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
21
    box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000;
22
    -webkit-animation: jump 1s infinite;
23
    -moz-animation: jump 1s infinite;
24
    animation: jump 1s infinite;
25
}
26
 
27
.ball::after {
28
    content: "";
29
    position: absolute;
30
    width: 60px;
31
    height: 30px;
32
    border-radius: 40px / 20px;
33
    left: 30px;
34
    top: 10px;
35
    background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
36
    background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
37
    background: linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
38
}
39
 
40
.ball-shadow {
41
    position: absolute;
42
    left: 50%;
43
    bottom: 0;
44
    width: 50px;
45
    height: 65px;
46
    border-radius: 30px / 40px;
47
    margin-left: -25px;
48
    background: rgba(20, 20, 20, 0.1);
49
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
50
    -webkit-transform: scaleY(0.3);
51
    -moz-transform: scaleY(0.3);
52
    transform: scaleY(0.3);
53
    -webkit-animation: shrink 1s infinite;
54
    -moz-animation: shrink 1s infinite;
55
    animation: shrink 1s infinite;
56
}
57
 
58
/**
59
 *  animation
60
 */
61
 
62
@-webkit-keyframes jump {
63
    0% {
64
  top: 0;
65
  -webkit-animation-timing-function: ease-in;
66
    }
67
    40% {}
68
    50% {
69
  top: 140px;
70
  height: 120px;
71
  -webkit-animtion-timing-function: ease-out;
72
    }
73
    55% {
74
  top: 160px;
75
  height: 100px;
76
  border-radius: 70px/60px;
77
  -webkit-animation-timing-function: ease-in;
78
    }
79
    65% {
80
  top: 110px;
81
  height: 120px;
82
  border-radius: 50%;
83
  -webkit-animation-timing-function: ease-out;
84
    }
85
    95% {
86
  top: 0;
87
  -webkit-animation-timing-function: ease-in;
88
    }
89
    100% {
90
  top: 0;
91
  -webkit-animation-timing-function: ease-in;
92
    }
93
}
94
 
95
@-moz-keyframes jump {
96
    0% {
97
  top: 0;
98
  -moz-animation-timing-function: ease-in;
99
    }
100
    40% {}
101
    50% {
102
  top: 140px;
103
  height: 120px;
104
  -moz-animtion-timing-function: ease-out;
105
    }
106
    55% {
107
  top: 160px;
108
  height: 100px;
109
  border-radius: 70px/60px;
110
  -moz-animation-timing-function: ease-in;
111
    }
112
    65% {
113
  top: 110px;
114
  height: 120px;
115
  border-radius: 50%;
116
  -moz-animation-timing-function: ease-out;
117
    }
118
    95% {
119
  top: 0;
120
  -moz-animation-timing-function: ease-in;
121
    }
122
    100% {
123
  top: 0;
124
  -moz-animation-timing-function: ease-in;
125
    }
126
}
127
 
128
 
129
@-webkit-keyframes shrink {
130
    0% {
131
  bottom: 0;
132
  margin-left: -30px;
133
  width: 60px;
134
  height: 75px;
135
  background: rgba(20, 20, 20, .1);
136
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
137
  border-radius: 30px / 40px;
138
  -webkit-animation-timing-function: ease-in;
139
    }
140
    50% {
141
  bottom: 30px;
142
  margin-left: -10px;
143
  width: 20px;
144
  height: 5px;
145
  background: rgba(20, 20, 20, .3);
146
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
147
  border-radius: 20px / 20px;
148
  -webkit-animation-timing-function: ease-out;
149
    }
150
    100% {
151
  bottom: 0;
152
  margin-left: -30px;
153
  width: 60px;
154
  height: 75px;
155
  background: rgba(20, 20, 20, .1);
156
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
157
  border-radius: 30px / 40px;
158
  -webkit-animation-timing-function: ease-in;
159
    }
160
}
161
@-moz-keyframes shrink {
162
    0% {
163
  bottom: 0;
164
  margin-left: -30px;
165
  width: 60px;
166
  height: 75px;
167
  background: rgba(20, 20, 20, .1);
168
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
169
  border-radius: 30px / 40px;
170
  -moz-animation-timing-function: ease-in;
171
    }
172
    50% {
173
  bottom: 30px;
174
  margin-left: -10px;
175
  width: 20px;
176
  height: 5px;
177
  background: rgba(20, 20, 20, .3);
178
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
179
  border-radius: 20px / 20px;
180
  -moz-animation-timing-function: ease-out;
181
    }
182
    100% {
183
  bottom: 0;
184
  margin-left: -30px;
185
  width: 60px;
186
  height: 75px;
187
  background: rgba(20, 20, 20, .1);
188
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
189
  border-radius: 30px / 40px;
190
  -moz-animation-timing-function: ease-in;
191
    }
192
}
193
 
 

Bouncy Ball CSS

CSSDeck G+