Ajax Loader
HTML 
<div id="overlay"></div>
1
<div id="overlay"></div>
2
<div id="lines"></div>•
 
CSS 
html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
1
html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
2
 
3
body {
4
    background:#25adf0;
5
    z-index:-5;
6
  min-height: 500px;
7
  overflow: hidden;
8
}
9
 
10
#lines {
11
    background-size: 20px 20px;  
12
    background-image: -webkit-repeating-linear-gradient(0deg, #6E6E6E, #6E6E6E 2px, transparent 2px, transparent 7px),-webkit-repeating-linear-gradient(-90deg, #6E6E6E, #6E6E6E 2px, transparent 2px, transparent 7px);
13
    background-image: -moz-repeating-linear-gradient(0deg, #6E6E6E, #6E6E6E 2px, transparent 2px, transparent 7px),-moz-repeating-linear-gradient(-90deg, #6E6E6E, #6E6E6E 2px, transparent 2px, transparent 7px);
14
  background-image: -ms-repeating-linear-gradient(0deg, #6E6E6E, #6E6E6E 2px, transparent 2px, transparent 7px),-ms-repeating-linear-gradient(-90deg, #6E6E6E, #6E6E6E 2px, transparent 2px, transparent 7px);
15
    background-image: -o-repeating-linear-gradient(0deg, #6E6E6E, #6E6E6E 2px, transparent 2px, transparent 7px),-o-repeating-linear-gradient(-90deg, #6E6E6E, #6E6E6E 2px, transparent 2px, transparent 7px);
16
    background-image:repeating-linear-gradient(0deg, #6E6E6E, #6E6E6E 2px, transparent 2px, transparent 7px),repeating-linear-gradient(-90deg, #6E6E6E, #6E6E6E 2px, transparent 2px, transparent 7px);
17
    height:100%;
18
    width:100%;
19
    opacity:0.14;
20
    position:absolute;
21
    top:0;
22
    left:0;
23
    z-index:-4;
24
}
25
 
26
#overlay {
27
    background-image: -moz-radial-gradient(50% 50%, circle closest-side, transparent 97%,#0d7cb3 310%);
28
    background-image: -webkit-radial-gradient(50% 50%, circle closest-side, transparent 97%,#0d7cb3 310%);
29
    background-image: -o-radial-gradient(50% 50%, circle closest-side, transparent 97%,#0d7cb3 310%);
30
    background-image: -ms-radial-gradient(50% 50%, circle closest-side, transparent 97%,#0d7cb3 310%);
31
    background-image: radial-gradient(50% 50%, circle closest-side, transparent 97%,#0d7cb3 310%);
32
    position:absolute;
33
    top:0;
34
    left:0;
35
    height:100%;
36
    width:100%;
37
    z-index:-3;
38
}•
 

Blue Grid Background with a Sphere

CSSDeck G+