Ajax Loader
HTML 
<div class="wrapper">
1
<div class="wrapper">
2
  <div class="dot"></div>
3
  <div class="dot"></div>
4
  <div class="dot"></div>
5
  <div class="dot"></div>
6
  <div class="dot"></div>
7
  <div class="dot"></div>
8
  <div class="dot"></div>
9
  <div class="dot"></div>
10
  <div class="dot"></div>
11
  <div class="dot"></div>
12
  <div class="dot"></div>
13
  <div class="dot"></div>
14
  <div class="dot"></div>
15
  <div class="dot"></div>
16
  <div class="dot"></div>
17
  <div class="dot"></div>
18
  <div class="dot"></div>
19
  <div class="dot"></div>
20
  <div class="dot"></div>
21
  <div class="dot"></div>
22
  <div class="dot"></div>
23
  <div class="dot"></div>
24
  <div class="dot"></div>
25
  <div class="dot"></div>
26
  <div class="dot"></div>
27
  <div class="dot"></div>
28
  <div class="dot"></div>
29
  <div class="dot"></div>
30
  <div class="dot"></div>
31
  <div class="dot"></div>
32
  <div class="dot"></div>
33
  <div class="dot"></div>
34
  <div class="dot"></div>
35
  <div class="dot"></div>
36
  <div class="dot"></div>
37
  <div class="dot"></div>
38
  <div class="dot"></div>
39
  <div class="dot"></div>
40
  <div class="dot"></div>
41
  <div class="dot"></div>
42
  <div class="dot"></div>
43
  <div class="dot"></div>
44
  <div class="dot"></div>
45
  <div class="dot"></div>
46
  <div class="dot"></div>
47
  <div class="dot"></div>
48
  <div class="dot"></div>
49
  <div class="dot"></div>
50
  <div class="dot"></div>
51
  <div class="dot"></div>
52
  <div class="dot"></div>
53
  <div class="dot"></div>
54
  <div class="dot"></div>
55
  <div class="dot"></div>
56
  <div class="dot"></div>
57
  <div class="dot"></div>
58
  <div class="dot"></div>
59
  <div class="dot"></div>
60
  <div class="dot"></div>
61
  <div class="dot"></div>
62
  <div class="dot"></div>
63
  <div class="dot"></div>
64
  <div class="dot"></div>
65
  <div class="dot"></div>
66
  <div class="dot"></div>
67
  <div class="dot"></div>
68
  <div class="dot"></div>
69
  <div class="dot"></div>
70
  <div class="dot"></div>
71
  <div class="dot"></div>
72
  <div class="dot"></div>
73
  <div class="dot"></div>
74
  <div class="dot"></div>
75
  <div class="dot"></div>
76
  <div class="dot"></div>
77
  <div class="dot"></div>
78
  <div class="dot"></div>
79
  <div class="dot"></div>
80
  <div class="dot"></div>
81
  <div class="dot"></div>
82
  <div class="dot"></div>
83
  <div class="dot"></div>
84
  <div class="dot"></div>
85
  <div class="dot"></div>
86
  <div class="dot"></div>
87
  <div class="dot"></div>
88
  <div class="dot"></div>
89
  <div class="dot"></div>
90
  <div class="dot"></div>
91
  <div class="dot"></div>
92
  <div class="dot"></div>
93
  <div class="dot"></div>
94
  <div class="dot"></div>
95
  <div class="dot"></div>
96
  <div class="dot"></div>
97
  <div class="dot"></div>
98
  <div class="dot"></div>
99
  <div class="dot"></div>
100
  <div class="dot"></div>
101
  <div class="dot"></div>
102
  <div class="dot"></div>
103
  <div class="dot"></div>
104
  <div class="dot"></div>
105
  <div class="dot"></div>
106
  <div class="dot"></div>
107
  <div class="dot"></div>
108
  <div class="dot"></div>
109
</div>
110
 
111
<div class="about">
112
  <h2>Equalizer / Loading</h2>
113
  <p>By Nijiko Yonskai</p>
114
</div>
115
 
116
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS 
body, html {
1
body, html {
2
  background: #34495e;
3
  width: 100%;
4
  height: 100%;
5
  overflow: hidden;
6
7
  font-family: 'Helvetica Neue';
8
}
9
 
10
.wrapper {
11
  position: absolute;
12
  left: -2px;
13
}
14
15
.about {
16
  position: absolute;
17
  top: 50%;
18
  left: 50%;
19
  text-align: right;
20
  color: white;
21
  text-rendering: optimizeLegibility;
22
  font-smoothing: antialiased;
23
}
24
 
25
.dot {
26
  height: 2em;
27
  width: 0.7em;
28
  position: absolute;
29
  display: inline-block;
30
  background: rgba(189,195,199,.5);
31
  margin: 0.3em .1em;
32
  border-radius: 6px;
33
  bottom: 0;
34
  top: -.5em;
35
  /*box-shadow: inset 0 1px 2px rgba(0,0,0,0.4); */
36
  transition: all .9s ease-in;
37
}
 
JavaScript 
var dots = $('.dot');
1
var dots = $('.dot');
2
var TIMEFRAME = 1;
3
var MAX_HEIGHT = 11;
4
var MIN_HEIGHT = 1;
5
var MAX_COLOR = 8;
6
var MIN_COLOR = 1;
7
var COLOR = '189,195,199'; // RGB
8
 
9
dots.each(function (i) {
10
  $(this).css({ 'margin-left': (i * 1) + 'em'});
11
});
12
 
13
setInterval(function () {
14
  dots.each(function () {
15
    var height = Math.floor((Math.random() * MAX_HEIGHT) + MIN_HEIGHT);
16
    $(this).css({
17
      height: height + 'em',
18
      top: '-' + height/2 + 'em',
19
      background: 'rgba('+ COLOR +',.' + Math.floor((Math.random() * MAX_COLOR) + MIN_COLOR) + ')'
20
    });
21
  });
22
}, 1000 * TIMEFRAME);
 

Equalizer

CSSDeck G+