Ajax Loader
HTML 
<div id="cloud"><span class="shadow"></span></div>
1
<div id="cloud"><span class="shadow"></span></div>
 
CSS 
body {
1
body {
2
  background: #ccc;
3
}
4
 
5
div#cloud {
6
  width: 350px;
7
  height: 120px;
8
9
  background: #f2f9fe;
10
  background: -moz-linear-gradient(top,  #f2f9fe 5%, #d6f0fd 100%);
11
  background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#f2f9fe), color-stop(100%,#d6f0fd));
12
  background: -webkit-linear-gradient(top,  #f2f9fe 5%,#d6f0fd 100%);
13
  background: -o-linear-gradient(top,  #f2f9fe 5%,#d6f0fd 100%);
14
  background: -ms-linear-gradient(top,  #f2f9fe 5%,#d6f0fd 100%);
15
  background: linear-gradient(top,  #f2f9fe 5%,#d6f0fd 100%);
16
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#d6f0fd',GradientType=0 );
17
 
18
  position: relative;
19
  margin: 120px auto 20px;
20
21
  -webkit-border-radius: 100px;
22
  -moz-border-radius: 100px;
23
  border-radius: 100px;
24
}
25
 
26
div#cloud:after, div#cloud:before {
27
  content: '';
28
  position: absolute;
29
  z-indeX: -1;
30
  background: #f2f9fe;
31
}
32
 
33
div#cloud:after {
34
  width: 100px;
35
  height: 100px;
36
37
  -webkit-border-radius: 100px;
38
  -moz-border-radius: 100px;
39
  border-radius: 100px;
40
 
41
  top: -50px;
42
  left: 50px;
43
}
44
 
45
div#cloud:before {
46
  width: 180px;
47
  height: 180px;
48
49
  -webkit-border-radius: 200px;
50
  -moz-border-radius: 200px;
51
  border-radius: 200px;
52
 
53
  top: -90px;
54
  right: 50px;
55
}
56
 
57
span.shadow {
58
  width: 350px;
59
  position: absolute;
60
  bottom: -10px;
61
  background: black;
62
  z-index: -1;
63
64
  -webkit-border-radius: 50%;
65
  -moz-border-radius: 50%;
66
  border-radius: 50%;
67
68
  -webkit-box-shadow: 0px 0px 25px 8px rgba(0,0,0,0.4);
69
  -moz-box-shadow: 0px 0px 25px 8px rgba(0,0,0,0.4);
70
  box-shadow: 0px 0px 25px 8px rgba(0,0,0,0.4);
71
}
72
 

Soothing clouds

CSSDeck G+