Ajax Loader
HTML 
<div class="container">
1
<div class="container">
2
3
  <div class="cord leftMove">
4
    <div class="ball"></div>
5
  </div>
6
  <div class="cord">
7
    <div class="ball"></div>
8
  </div>
9
  <div class="cord">
10
    <div class="ball"></div>
11
  </div>
12
  <div class="cord">
13
    <div class="ball"></div>
14
  </div>
15
  <div class="cord">
16
    <div class="ball"></div>
17
  </div>
18
  <div class="cord">
19
    <div class="ball"></div>
20
  </div>
21
  <div class="cord rightMove">
22
    <div class="ball" id="first"></div>
23
  </div>
24
25
26
  <div class="shadows">
27
    <div class="leftShadow"></div>
28
    <div></div>
29
    <div></div>
30
    <div></div>
31
    <div></div>
32
    <div></div>
33
    <div class="rightShadow"></div>
34
  </div>
35
 
36
  <br><br>
37
  Inspired by <a href="http://dribbble.com/shots/963799-Animation-Loading-gif">Jordi Verdu</a>
38
</div>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Quicksand:700);
1
@import url(http://fonts.googleapis.com/css?family=Quicksand:700);
2
 
3
body{
4
  font-family: 'Quicksand', sans-serif;
5
  margin:0;
6
  background: #ede9de;
7
  color:#666;
8
}
9
 
10
a, a:visited, a:hover{
11
  text-decoration:none;
12
  color:#db5989;
13
}
14
a:hover{
15
  color:#a05772;
16
}
17
 
18
.container {
19
  height: 150px;
20
  left: 50%;
21
  margin: -75px 0 0 -53px;
22
  position: absolute;
23
  top: 50%;
24
  width: 106px;
25
  text-align:center;
26
}
27
 
28
 
29
.cord{
30
  padding-top:100px;
31
  width:15px;
32
  transform: rotate(0deg);
33
  transform-origin:50% 50%;
34
  float:left;
35
}
36
 
37
 
38
.ball{
39
  background:#333;
40
  width:15px;
41
  height:15px;
42
  float:left;
43
  border-radius:50%;
44
}
45
 
46
.shadows{
47
  clear:left;
48
  padding-top:20px;
49
  margin-left:-2px;
50
}
51
 
52
.shadows div{
53
  float:left;
54
  margin-left: 2px;
55
  width:13px;
56
  height:3px;
57
  border-radius:50%;
58
  box-shadow: 0px 0px 3px rgba(204, 204, 204, 0.3);
59
  background: rgba(204, 204, 204, 0.3);
60
}
61
 
62
.leftMove{
63
  animation: leftBall .5s ease-in-out 0s infinite alternate;
64
}
65
.rightMove{
66
  animation: rightBall .5s ease-in-out 0s infinite alternate;
67
}
68
 
69
 
70
.leftShadow{
71
  animation: leftShadowN .5s ease-in-out 0s infinite alternate;
72
}
73
.rightShadow{
74
  animation: rightShadowN .5s ease-in-out 0s infinite alternate;
75
}
76
 
77
 
78
@keyframes leftBall
79
{
80
0% {
81
  transform: rotate(0deg) translateY(0px);
82
  }
83
/*this pauses the ball at the begining*/
84
50% {
85
  transform: rotate(0deg) translateY(0px);
86
  }
87
100% {
88
  transform: rotate(50deg) translateY(-20px);
89
  }
90
 
91
}
92
 
93
@keyframes rightBall
94
{
95
0% {
96
  transform: rotate(-50deg) translateY(-20px);
97
  }
98
/*this pauses the ball at the begining*/
99
50% {
100
  transform: rotate(0deg) translateY(0px);
101
  }
102
100% {
103
  transform: rotate(0deg) translateY(0px)
104
      translateX(0px);
105
  }
106
 
107
}
108
 
109
@keyframes leftShadowN
110
{
111
0% {
112
transform: translateX(0px);
113
  
114
  
115
  }
116
/*this pauses the ball at the begining*/
117
50% {
118
  transform: translateX(0px);
119
 
120
  }
121
 
122
100% {
123
124
transform: translateX(-25px);
125
  }
126
 
127
}
128
 
129
@keyframes rightShadowN
130
{
131
0% {
132
  transform: translateX(25px);
133
  }
134
/*this pauses the ball at the begining*/
135
50% {
136
  transform: translateY(0px);
137
 
138
  }
139
 
140
100% {
141
  transform: translateY(0px);
142
 
143
  }
144
 
145
}
146
 
147
 
148
/*colors*/
149
 
150
.cord:nth-of-type(1) .ball{
151
  background:#335672;
152
}
153
.cord:nth-of-type(2) .ball{
154
  background:#35506b;
155
}
156
.cord:nth-of-type(3) .ball{
157
  background:#5f4e60;
158
}
159
.cord:nth-of-type(4) .ball{
160
  background:#924a4e;
161
}
162
.cord:nth-of-type(5) .ball{
163
  background:#a73a33;
164
}
165
.cord:nth-of-type(6) .ball{
166
  background:#cf4231;
167
}
168
.cord:nth-of-type(7) .ball{
169
  background:#df3e2a;
170
}
 

CSS3 loader: Newton's Cradle

CSSDeck G+