Ajax Loader
HTML 
<div class="e"></div>
1
<div class="e"></div>
2
<div class="e"></div>
3
<div class="e"></div>
 
CSS 
body {
1
body {
2
  background: rgb(26,26,26);
3
}
4
 
5
.e {
6
  width:35px;
7
  height:35px;
8
  background:darkgreen;
9
10
  top:0; left:0; right:20%; bottom:0;
11
  margin: auto;
12
  position: absolute;
13
14
    -webkit-transition: all 2s ease;
15
  -moz-transition: all 2s ease;
16
  -o-transition: all 2s ease;
17
  transition: all 2s ease;
18
19
  animation: spin 3s;
20
  -webkit-animation: spin 3s;
21
  animation-iteration-count: infinite;
22
  -webkit-animation-iteration-count: infinite;
23
  -webkit-animation-direction: alternate;
24
  -moz-animation-direction: alternate;
25
  -o-animation-direction: alternate;
26
  animation-direction: alternate;
27
}
28
 
29
.e:nth-child(1) {
30
  animation-delay: 0.5s;
31
}
32
 
33
.e:nth-child(2) {
34
  animation-delay: 1s;
35
  top:0; left:0; right:0; bottom:0;
36
}
37
 
38
.e:nth-child(3) {
39
  animation-delay: 1.5s;
40
  top:0; left:0; right:-20%; bottom:0;
41
}
42
 
43
@keyframes spin {
44
  to{
45
    background:blue;
46
  transform: rotateZ(540deg);
47
    border-radius:50%;
48
  }
49
}
50
 
51
@-webkit-keyframes spin {
52
  to{
53
    background:blue;
54
  transform: rotateZ(540deg);
55
    border-radius:50%;
56
  }
57
}
58
 
59
.e:hover {
60
  transform: rotateZ(540deg);
61
  border-radius:50%;
62
}
 

Squares Loading Animation

CSSDeck G+