Ajax Loader
HTML
<div class="smiley">
1
<div class="smiley">
2
  <div class="smile"></div>
3
  <div class="sad"></div>
4
  <div class="cry"></div>
5
  <div class="wink"></div>
6
  <div class="sarcastic"></div>
7
  <div class="indifferent"></div>
8
  <div class="moustache"></div>
9
  <div class="oh"></div>
10
  <div class="mouth_shut"></div>
11
  <div class="cheek"></div>
12
  <div class="nap"></div>
13
  <!-- Indian Style Welcome -->
14
  <div class="welcome"></div>
15
  <div class="undecided"></div>
16
  <div class="partying"></div>
17
  <div class="angel"></div>
18
  <div class="evil"></div>
19
  <div class="vampire"></div>
20
  <div class="laugh"></div>
21
  <div class="tongue_cheek"></div>
22
  <div class="angry"></div>
23
  <div class="kissed"></div>
24
  <div class="heart"></div>
25
  <div class="smug"></div>
26
  <div class="sigh"></div>
27
  <br/>
28
  <div class="greedy"></div>
29
  <div class="tongue_tied"></div>
30
</div>
 
CSS
body {
1
body {
2
  background-color: #282831;
3
  color: #999;
4
  left: 10%;
5
  position: absolute;
6
  width: 600px;
7
  font-family: Arial;
8
  font-size: 1.25em;
9
}
10
 
11
.smiley > div {
12
  position: relative;
13
  display: inline-block;
14
  width: 45px;
15
  height: 45px;
16
  margin: 22.5px;
17
  text-align: center;
18
  line-height: 45px;
19
  border: 2px solid #999;
20
  border-radius: 100%;
21
}
22
 
23
:before,
24
:after {
25
  left: 0px;
26
  top: -2px;
27
  height: 100%;
28
  width: 100%;
29
  position: absolute;
30
  font-weight: bolder;
31
  transform-origin: bottm left;
32
  border: 2px solid transparent;
33
}
34
 
35
.smile:after {
36
  content: ":-)";
37
  transform: rotate(90deg);
38
}
39
 
40
.sad:after {
41
  content: ":-(";
42
  transform: rotate(90deg);
43
}
44
 
45
.cry:after {
46
  content: "'";
47
  margin-left: 8px;
48
  margin-top: 5px;
49
}
50
 
51
.cry:before {
52
  content: ": (";
53
  transform: rotate(90deg);
54
}
55
 
56
.wink:after {
57
  content: ";-)";
58
  transform: rotate(90deg);
59
}
60
 
61
.sarcastic:before {
62
  content: ":-\00a0";
63
  transform: rotate(90deg);
64
}
65
 
66
.sarcastic:after{
67
  content: "s";
68
  margin-top: 10px;
69
  transform: rotate(90deg) ;
70
}
71
 
72
.indifferent:after {
73
  content: ":-\00a0";
74
  transform: rotate(90deg);
75
}
76
 
77
.indifferent:before{
78
  content: "|";
79
  margin-top: 10px;
80
  transform: rotate(90deg);
81
}
82
 
83
.moustache:after {
84
  content:":-{)";
85
  transform: rotate(90deg);
86
}
87
 
88
.undecided:before {
89
  content: ":-\00a0";
90
  transform: rotate(90deg);
91
}
92
 
93
.undecided:after {
94
  content: "/";
95
  margin-top: 10px;
96
  margin-left: -2px;
97
  transform: rotate(90deg);
98
}
99
 
100
.oh:after {
101
  content: ":-o";
102
  transform: rotate(90deg);
103
}
104
 
105
.mouth_shut:after {
106
  content: ":-x";
107
  transform: rotate(90deg);
108
}
109
 
110
.laugh:before {
111
  content: ":-\00a0";
112
  transform: rotate(90deg);
113
}
114
 
115
.laugh:after {
116
  content: "D";
117
  margin-top: 10px;
118
  margin-left: -2px;
119
  transform: rotate(90deg) scaleX(0.75);
120
}
121
 
122
.cheek:before {
123
  content: ":-\00a0";
124
  transform: rotate(90deg);
125
}
126
 
127
.cheek:after {
128
  content: "P";
129
  margin-top: 10px;
130
  margin-left: -1px;
131
  transform: rotate(90deg) scaleX(0.75);
132
}
133
 
134
.partying:before {
135
  content: "<";
136
  margin-top: -25px;
137
  margin-left: -1px;
138
  transform: rotate(90deg) scaleY(1.5) scaleX(1.25);
139
  z-index: 2;
140
}
141
 
142
.partying:after {
143
  content: ":-o";
144
  transform: rotate(90deg);
145
}
146
 
147
.angel:before {
148
  content: "\00a0";
149
  height: 10px;
150
  width: 18px;
151
  border-radius: 100%;
152
  border: 3px solid #999;
153
  margin-left: 11px;
154
  margin-top: -6px;
155
  transform: rotateX(40deg);
156
  z-index: 2;
157
}
158
 
159
.angel:after {
160
  content: ":-)";
161
  transform: rotate(90deg);
162
}
163
 
164
.greedy:before {
165
  content: "\00a0\00a0-)";
166
  transform: rotate(90deg);
167
}
168
 
169
.greedy:after {
170
  content: "$ $";
171
  margin-top: -5px;
172
  margin-left: -2px;
173
  transform: rotate(0deg) scale(0.75);
174
}
175
 
176
.nap:before {
177
  content: "~ ~";
178
  margin-top: -5px;
179
  margin-left: -2px;
180
  transform: scaleX(0.80);
181
}
182
 
183
.nap:after {
184
  content: "\00a0\00a0-)";
185
  transform: rotate(90deg);
186
}
187
 
188
.evil:before {
189
  content: "^ ^";
190
  margin-top: -15px;
191
  margin-left: -2px;
192
  transform: rotate(0deg) scale(1.4);
193
}
194
 
195
.evil:after {
196
  content: ":-)";
197
  transform: rotate(90deg);
198
}
199
 
200
.kissed:before {
201
  content: ":- )";
202
  transform: rotate(90deg);
203
}
204
 
205
.kissed:after {
206
  content: "*";
207
  margin-left: 6px;
208
  transform: rotate(90deg);
209
}
210
 
211
.smug:before {
212
  content: ":-\00a0";
213
  transform: rotate(90deg);
214
}
215
 
216
.smug:after {
217
  content: "<";
218
  margin-left: -2px;
219
  margin-top: 12px;
220
  transform: rotate(90deg) scaleX(0.75) scaleY(1.25);
221
}
222
 
223
.sigh:before {
224
  content: ":-\00a0";
225
  transform: rotate(90deg);
226
}
227
 
228
.sigh:after {
229
  content: ">";
230
  margin-left: -2px;
231
  margin-top: 10px;
232
  transform: rotate(90deg) scaleX(0.75) scaleY(1.25);
233
}
234
 
235
.tongue_cheek:before {
236
  content: ":-\00a0";
237
  transform: rotate(90deg);
238
}
239
 
240
.tongue_cheek:after {
241
  content: "J";
242
  margin-left: -3px;
243
  margin-top: 9px;
244
  transform: rotate(90deg);
245
}
246
 
247
.tongue_tied:before {
248
  content: ":-\00a0";
249
  transform: rotate(90deg);
250
}
251
 
252
.tongue_tied:after {
253
  content: "&";
254
  margin-left: -2px;
255
  margin-top: 12px;
256
  transform: rotate(90deg) scaleX(0.75) scaleY(0.75);
257
}
258
 
259
.angry:before {
260
  content: "> <";
261
  margin-top: -5px;
262
  margin-left: -1px;
263
  transform: scale(0.75);
264
}
265
 
266
.angry:after {
267
  content: "\00a0\00a0-(";
268
  transform: rotate(90deg);
269
}
270
 
271
.vampire:before {
272
  content: ":-\00a0";
273
  transform: rotate(90deg);
274
}
275
 
276
.vampire:after {
277
  content: "E";
278
  margin-left: -2px;
279
  margin-top: 10px;
280
  transform: rotate(90deg) scaleX(0.70);
281
}
282
 
283
.welcome:after {
284
  content: "_/\\_";
285
  margin-left: -2px;
286
  margin-top: -2px;
287
}
288
/** Inspired by Andreas Storm's creation **/
289
 
290
.heart:before {
291
  content: '';
292
  transform: rotate(45deg);
293
  width: 22.5px;
294
  height: 15px;
295
  background: #999;
296
  margin-top: 15px;
297
  margin-left: 7px;
298
  border-radius: 10px 0px 0px 10px;
299
}
300
 
301
.heart:after {
302
  content: '';
303
  transform: rotate(-225deg);
304
  width: 22.5px;
305
  height: 15px;
306
  background: #999;
307
  margin-top: 15px;
308
  margin-left: 13px;
309
  border-radius: 10px 0px 0px 10px;
310
}
 

One Div Text Based Emoticon Set

CSSDeck G+