Ajax Loader
HTML
<div id="reddit-alien">
1
<div id="reddit-alien">
2
  <div class="antenna">
3
  <div class="dot"></div>
4
  </div>
5
  <div class="ear left"></div>
6
  <div class="ear right"></div>
7
  <div class="head">
8
    <div class="eye left"></div>
9
    <div class="eye right"></div>
10
    <div class="mouth"></div>
11
  </div>
12
  <div class="arm left"></div>
13
  <div class="arm right"></div>
14
  <div class="body"></div>
15
  <div class="foot left"></div>
16
  <div class="foot right">
17
</div>
 
CSS
/* * Reddit Alien **
1
/* * Reddit Alien **
2
*****************
3
   ================================================== */
4
 
5
#reddit-alien {
6
    width: 296px;
7
    height: 380px;
8
    position: relative;
9
    margin: 0 auto;
10
}
11
 
12
#reddit-alien div { position: absolute }
13
 
14
#reddit-alien .antenna {
15
    height: 50px;
16
    width: 44px;
17
    top: 40px;
18
    left: 155px;
19
    border: 7px solid black;
20
    border-width: 9px 0 0 9px;
21
    -webkit-border-radius: 5px 0 0 0;
22
    -webkit-background-clip: padding-box;
23
    -moz-border-radius: 5px 0 0 0;
24
    border-radius: 5px 0 0 0;
25
    -webkit-transform: rotate(16deg);
26
    -moz-transform: rotate(16deg);
27
    -o-transform: rotate(16deg);
28
}
29
 
30
#reddit-alien .dot {
31
    width: 26px;
32
    height: 26px;
33
    left: 37px;
34
    top: -28px;
35
    border: 8px solid black;
36
    -webkit-border-radius: 26px;
37
    -webkit-background-clip: padding-box;
38
    -moz-border-radius: 26px;
39
    border-radius: 26px;
40
    background: white;
41
}
42
 
43
#reddit-alien .ear {
44
    width: 32px;
45
    height: 32px;
46
    top: 100px;
47
    border: 8px solid black;
48
    -webkit-border-radius: 32px;
49
    -webkit-background-clip: padding-box;
50
    -moz-border-radius: 32px;
51
    border-radius: 32px;
52
    background: white;
53
}
54
 
55
#reddit-alien .ear.left { left: 40px }
56
 
57
#reddit-alien .ear.right { left: 216px }
58
 
59
#reddit-alien .head {
60
    z-index: 2;
61
    top: 88px;
62
    left: 52px;
63
    height: 115px;
64
    width: 182px;
65
    border: 9px solid black;
66
    -webkit-border-radius: 150px 100px;
67
    -webkit-background-clip: padding-box;
68
    -moz-border-radius: 150px / 100px;
69
    border-radius: 150px / 100px;
70
    background: white;
71
}
72
 
73
#reddit-alien .eye {
74
    z-index: 2;
75
    width: 32px;
76
    height: 32px;
77
    top: 29px;
78
    -webkit-border-radius: 16px;
79
    -moz-border-radius: 16px;
80
    border-radius: 16px;
81
    background: orangeRed;
82
}
83
 
84
#reddit-alien .eye.left { left: 42px }
85
 
86
#reddit-alien .eye.right { left: 110px }
87
 
88
#reddit-alien .mouth {
89
    z-index: 1;
90
    width: 94px;
91
    height: 80px;
92
    top: 3px;
93
    left: 35px;
94
    border: 9px solid white;
95
    border-bottom-color: black;
96
    -webkit-border-radius: 150px 120px;
97
    -moz-border-radius: 150px / 120px;
98
    border-radius: 150px / 120px;
99
}
100
 
101
#reddit-alien .body {
102
    z-index: 1;
103
    width: 88px;
104
    height: 178px;
105
    left: 100px;
106
    top: 150px;
107
    border: 8px solid black;
108
    -webkit-border-radius: 120px 250px;
109
    -webkit-background-clip: padding-box;
110
    -moz-border-radius: 120px / 250px;
111
    border-radius: 120px / 250px;
112
    background: white;
113
}
114
 
115
#reddit-alien .arm {
116
    height: 78px;
117
    width: 39px;
118
    top: 210px;
119
    border: 8px solid black;
120
    background: white;
121
    -webkit-background-clip: padding-box;
122
}
123
 
124
#reddit-alien .arm.left {
125
    left: 78px;
126
    -webkit-border-radius: 43px 0 0 43px;
127
    -moz-border-radius: 80px 0 0 90px;
128
    border-radius: 43px 0 0 43px;
129
}
130
 
131
#reddit-alien .arm.right {
132
    left: 170px;
133
    -webkit-border-radius: 0 43px 43px 0;
134
    -moz-border-radius: 0 80px 90px 0;
135
    border-radius: 0 43px 43px 0;
136
}
137
 
138
#reddit-alien .foot {
139
    border: 8px solid black;
140
    width : 50px;
141
    height: 16px;
142
    top: 312px;
143
    background: white;
144
    -webkit-background-clip: padding-box;
145
}
146
 
147
#reddit-alien .foot.left {
148
    -webkit-border-radius: 24px 24px 0 0;
149
    -moz-border-radius: 30px 0 0 10px;
150
    border-radius: 24px 24px 0 0;
151
    left: 82px;
152
}
153
 
154
#reddit-alien .foot.right {
155
    -webkit-border-radius: 24px 24px 0 0;
156
    -moz-border-radius: 0 30px 10px 0;
157
    border-radius: 24px 24px 0 0;
158
    left: 156px;
159
}
 

Reddit Alien in Pure CSS

CSSDeck G+