Ajax Loader
HTML 
<div id="container">
1
<div id="container">
2
      <div id="spinner" class="active">
3
        <span id="ball_1" class="spinner_ball"></span>
4
        <span id="ball_2" class="spinner_ball"></span>
5
        <span id="ball_3" class="spinner_ball"></span>
6
        <span id="ball_4" class="spinner_ball"></span>
7
        <span id="ball_5" class="spinner_ball"></span>
8
    </div>
9
</div>
 
CSS 
#container {
1
#container {
2
    position: absolute;
3
    top: 0;
4
    bottom: 0;
5
    right: 0;
6
    left: 0;
7
    background-color: black;
8
}
9
#spinner.active {
10
    display: block;
11
}
12
#spinner {
13
    display: none;
14
    position: absolute;
15
    height: 60px;
16
    width: 60px;
17
    top: 40%;
18
    left: 48%;
19
    z-index: 1;
20
}
21
.spinner_ball {
22
    position: absolute;
23
    display: block;
24
    background-color: white;
25
    left: 24px;
26
    width: 4px;
27
    height: 4px;
28
    border-radius: 2px;
29
}
30
#ball_1 {
31
    -webkit-animation-timing-function: cubic-bezier(0.7, 0.3, 0.7, 0.9);
32
    -webkit-animation-name: rotate;
33
    -webkit-animation-duration: .6s;
34
    -webkit-animation-iteration-count: infinite;
35
    -webkit-transform-origin: 6px 30px;
36
}
37
#ball_2 {
38
    -webkit-animation-timing-function: cubic-bezier(0.6, 0.4, 0.6, 0.9);
39
    -webkit-animation-name: rotate;
40
    -webkit-animation-duration: .6s;
41
    -webkit-animation-iteration-count: infinite;
42
    -webkit-transform-origin: 6px 30px;
43
}
44
#ball_3 {
45
    -webkit-animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.9);
46
    -webkit-animation-name: rotate;
47
    -webkit-animation-duration: .6s;
48
    -webkit-animation-iteration-count: infinite;
49
    -webkit-transform-origin: 6px 30px;
50
}
51
#ball_4 {
52
    -webkit-animation-timing-function: cubic-bezier(0.4, 0.6, 0.4, 0.9);
53
    -webkit-animation-name: rotate;
54
    -webkit-animation-duration: .6s;
55
    -webkit-animation-iteration-count: infinite;
56
    -webkit-transform-origin: 6px 30px;
57
}
58
#ball_5 {
59
    -webkit-animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 0.9);
60
    -webkit-animation-name: rotate;
61
    -webkit-animation-duration: .6s;
62
    -webkit-animation-iteration-count: infinite;
63
    -webkit-transform-origin: 6px 30px;
64
}
65
@-webkit-keyframes rotate {
66
  0% {
67
    -webkit-transform: rotate(0deg) scale(1);
68
  }
69
  100% {
70
    -webkit-transform: rotate(360deg) scale(1);
71
  }
72
}
 

AJAx Loader #2

CSSDeck G+