Ajax Loader
HTML 
<div id='overlay' data-bind='visible: loading'><span class="loading-bar">Loading Data - Please wait...</span></div>
1
<div id='overlay' data-bind='visible: loading'><span class="loading-bar">Loading Data - Please wait...</span></div>
 
CSS 
#overlay {
1
#overlay {
2
  position: fixed;
3
  top: 0;
4
  left: 0;
5
  width: 100%;
6
  height: 100%;
7
  text-align: center;
8
  background-color: #000;
9
  filter: alpha(opacity=50);
10
  -moz-opacity: 0.5;
11
  opacity: 0.85;  
12
}
13
 
14
#overlay span {
15
    padding: 50px;
16
    border-radius: 5px;
17
    color: #000;
18
    background-color: #fff;
19
    position:relative;
20
    top:50%;
21
    font-size: 28px;
22
    padding-top: 30px;
23
}
24
 
25
.loading-bar {
26
    width: 70%;
27
    background-repeat:no-repeat;
28
    background-position-x: 50%;
29
    background-position-y: 80%;
30
    background-image: url("http://s3-ap-southeast-2.amazonaws.com/lantrixcodebucket/ajax-loader_bar.gif") ;
31
    text-align: center;
32
    padding-top: 40px;
33
}
 

Loading Data

CSSDeck G+