Ajax Loader
HTML 
<div class="SpeechBalloon type1">
1
<div class="SpeechBalloon type1">
2
    <p>かわいいはつくれりゅ！</p>
3
</div>
4
 
5
<div class="SpeechBalloon type2">
6
    <p>かわいいはつくれりゅ！</p>
7
</div>
8
 
9
<div class="SpeechBalloon type3">
10
    <p>かわいいはつくれりゅ！</p>
11
</div>
12
 
13
<div class="SpeechBalloon type4">
14
    <p>かわいいはつくれりゅ！</p>
15
</div>
16
 
17
<div class="SpeechBalloon type5">
18
    <p>かわいいはつくれりゅ！</p>
19
</div>
20
 
 
CSS 
/*
1
/*
2
 * SpeechBalloon
3
 */
4
.SpeechBalloon{
5
    position:relative;
6
}
7
.SpeechBalloon p{font-size:12px;}
8
 
9
/*
10
 * SpeechBalloon Type1
11
 */
12
.SpeechBalloon.type1 {
13
    margin:0 auto 20px;
14
    left:-75px;
15
    width:100px;
16
    height:100px;
17
    background:#FF54AC;
18
    border-radius:50px;
19
    -webkit-box-shadow:
20
        50px 0 0 #FF54AC,
21
        100px 0 0 #FF54AC,
22
        150px 0 0 #FF54AC
23
    ;
24
    -moz-box-shadow:
25
        50px 0 0 #FF54AC,
26
        100px 0 0 #FF54AC,
27
        150px 0 0 #FF54AC
28
    ;
29
    box-shadow:
30
        50px 0 0 #FF54AC,
31
        100px 0 0 #FF54AC,
32
        150px 0 0 #FF54AC
33
    ;
34
}
35
.SpeechBalloon.type1:before {
36
    position:absolute;
37
    content:'';
38
    display:block;
39
    width:0;
40
    height:0;
41
    top:92px;
42
    left:116px;
43
    border-top:18px solid #FF54AC;
44
    border-left:8px solid transparent;
45
    border-right:8px solid transparent;
46
}
47
 
48
.SpeechBalloon.type1 p{
49
    position:absolute;
50
    top:45px;
51
    left:20px;
52
    width:225px;
53
    color:#fff;
54
    font-size:14px;
55
    text-align:center;
56
}
57
/*
58
 * SpeechBalloon Type2
59
 */
60
.SpeechBalloon.type2 {
61
    margin:0 auto 0;
62
    left:-75px;
63
    margin-bottom:15px;
64
    width:100px;
65
    height:100px;
66
    border-radius:50px;
67
    background:#FF54AC;
68
    -webkit-box-shadow:
69
        50px 0 0 #FF54AC,
70
        100px 0 0 #FF54AC,
71
        150px 0 0 #FF54AC
72
    ;
73
    -moz-box-shadow:
74
        50px 0 0 #FF54AC,
75
        100px 0 0 #FF54AC,
76
        150px 0 0 #FF54AC
77
    ;
78
    box-shadow:
79
        50px 0 0 #FF54AC,
80
        100px 0 0 #FF54AC,
81
        150px 0 0 #FF54AC
82
    ;
83
}
84
.SpeechBalloon.type2:before {
85
    position:absolute;
86
    content:'';
87
    display:block;
88
    width:20px;
89
    height:20px;
90
    border-radius:10px;
91
    top:85px;
92
    left:215px;
93
    background:#FF54AC;
94
}
95
.SpeechBalloon.type2:after {
96
    position:absolute;
97
    content:'';
98
    display:block;
99
    width:10px;
100
    height:10px;
101
    border-radius:5px;
102
    top:105px;
103
    left:230px;
104
    background:#FF54AC;
105
}
106
 
107
.SpeechBalloon.type2 p{
108
    position:absolute;
109
    top:45px;
110
    left:20px;
111
    width:225px;
112
    color:#fff;
113
    font-size:14px;
114
    text-align:center;
115
}
116
/*
117
 * SpeechBalloon Type3
118
 */
119
.SpeechBalloon.type3 {
120
    top:25px;
121
    margin:30px auto 100px;
122
    left:-75px;
123
    width:50px;
124
    height:50px;
125
    border-radius:25px;
126
    -moz-border-radius:25px;
127
    background:#FFF;
128
    -webkit-box-shadow:
129
        25px -20px 0 #FFF,
130
        50px -30px 0 #FFF,
131
        75px -35px 0 #FFF,
132
        100px -30px 0 #FFF,
133
        125px -20px 0 #FFF,
134
        150px 0px 0 #FFF,
135
        25px 20px 0 #FFF,
136
        50px 30px 0 #FFF,
137
        75px 35px 0 #FFF,
138
        100px 30px 0 #FFF,
139
        125px 25px 0 #FFF,
140
        60px 0px 0 #FFF,
141
        100px 0px 0 #FFF
142
    ;
143
    -moz-box-shadow:
144
        25px -20px 0 #FFF,
145
        50px -30px 0 #FFF,
146
        75px -35px 0 #FFF,
147
        100px -30px 0 #FFF,
148
        125px -20px 0 #FFF,
149
        150px 0px 0 #FFF,
150
        25px 20px 0 #FFF,
151
        50px 30px 0 #FFF,
152
        75px 35px 0 #FFF,
153
        100px 30px 0 #FFF,
154
        125px 25px 0 #FFF,
155
        60px 0px 0 #FFF,
156
        100px 0px 0 #FFF
157
    ;
158
    box-shadow:
159
        25px -20px 0 #FFF,
160
        50px -30px 0 #FFF,
161
        75px -35px 0 #FFF,
162
        100px -30px 0 #FFF,
163
        125px -20px 0 #FFF,
164
        150px 0px 0 #FFF,
165
        25px 20px 0 #FFF,
166
        50px 30px 0 #FFF,
167
        75px 35px 0 #FFF,
168
        100px 30px 0 #FFF,
169
        125px 25px 0 #FFF,
170
        60px 0px 0 #FFF,
171
        100px 0px 0 #FFF
172
    ;
173
}
174
.SpeechBalloon.type3:before {
175
    position:relative;
176
    content:'';
177
    display:block;
178
    top:-5px;
179
    left:-5px;
180
    width:60px;
181
    height:60px;
182
    border-radius:30px;
183
    background:#FF54AC;
184
    z-index:-1;
185
    -webkit-box-shadow:
186
        25px -20px 0 #FF54AC,
187
        50px -30px 0 #FF54AC,
188
        75px -35px 0 #FF54AC,
189
        100px -30px 0 #FF54AC,
190
        125px -20px 0 #FF54AC,
191
        150px 0px 0 #FF54AC,
192
        25px 20px 0 #FF54AC,
193
        50px 30px 0 #FF54AC,
194
        75px 35px 0 #FF54AC,
195
        100px 30px 0 #FF54AC,
196
        125px 25px 0 #FF54AC,
197
        60px 0px 0 #FF54AC,
198
        100px 0px 0 #FF54AC
199
    ;
200
    -moz-box-shadow:
201
        25px -20px 0 #FF54AC,
202
        50px -30px 0 #FF54AC,
203
        75px -35px 0 #FF54AC,
204
        100px -30px 0 #FF54AC,
205
        125px -20px 0 #FF54AC,
206
        150px 0px 0 #FF54AC,
207
        25px 20px 0 #FF54AC,
208
        50px 30px 0 #FF54AC,
209
        75px 35px 0 #FF54AC,
210
        100px 30px 0 #FF54AC,
211
        125px 25px 0 #FF54AC,
212
        60px 0px 0 #FF54AC,
213
        100px 0px 0 #FF54AC
214
    ;
215
    box-shadow:
216
        25px -20px 0 #FF54AC,
217
        50px -30px 0 #FF54AC,
218
        75px -35px 0 #FF54AC,
219
        100px -30px 0 #FF54AC,
220
        125px -20px 0 #FF54AC,
221
        150px 0px 0 #FF54AC,
222
        25px 20px 0 #FF54AC,
223
        50px 30px 0 #FF54AC,
224
        75px 35px 0 #FF54AC,
225
        100px 30px 0 #FF54AC,
226
        125px 25px 0 #FF54AC,
227
        60px 0px 0 #FF54AC,
228
        100px 0px 0 #FF54AC
229
    ;
230
}
231
.SpeechBalloon.type3:after {
232
    position:absolute;
233
    top:80px;
234
    left:97px;
235
    content:'';
236
    display:block;
237
    width:8px;
238
    height:8px;
239
    position:absolute;
240
    background:#fff;
241
    z-index:2;
242
    -webkit-transform:rotate(45deg);
243
    -webkit-box-shadow:4px 4px 0 #FF54AC;
244
    -moz-transform:rotate(45deg);
245
    -moz-box-shadow:4px 4px 0 #FF54AC;
246
  -ms-transform:rotate(45deg);
247
  -o-transform:rotate(45deg);
248
    transform:rotate(45deg);
249
    box-shadow:4px 4px 0 #FF54AC;
250
}
251
.SpeechBalloon.type3 p{
252
    position:absolute;
253
    top:20px;
254
    left:20px;
255
    width:175px;
256
    color:#FF54AC;
257
    font-size:14px;
258
    text-align:center;
259
}
260
 
261
/*
262
 * SpeechBalloon Type4
263
 */
264
.SpeechBalloon.type4 {
265
  width:170px;
266
  height:120px;
267
  margin:0 auto 20px;
268
}
269
.SpeechBalloon.type4:before {
270
  position:absolute;
271
  top:60px;
272
  left:-15px;
273
  content:'❤';
274
  display:block;
275
  width:0px;
276
  height:0px;
277
  line-height:0;
278
  font-size:200px;
279
  color:#FFF;
280
}
281
.SpeechBalloon.type4:after {
282
  position:absolute;
283
  top:60px;
284
  left:-25px;
285
  content:'❤';
286
  display:block;
287
  width:0px;
288
  height:0px;
289
  line-height:0;
290
  font-size:220px;
291
  color:#FF54AC;
292
  z-index:-1;
293
}
294
 
295
 
296
.SpeechBalloon.type4 p {
297
  position:relative;
298
  z-index:2;
299
  width:170px;
300
  height:120px;
301
  color:#FF54AC;
302
  line-height:120px;
303
  text-align:center;
304
}
305
 
306
/*
307
 * SpeechBalloon Type5
308
 */
309
.SpeechBalloon.type5 {
310
    position:relative;
311
    left:4px;
312
    width:150px;
313
    height:100px;
314
    margin:60px auto 100px;
315
    background:#FFF;
316
}
317
.SpeechBalloon.type5:before {
318
    position:absolute;
319
    top:-25px;
320
    left:-25px;
321
    content:'';
322
    display:block;
323
    width:50px;
324
    height:50px;
325
    background:#FFF;
326
    -webkit-transform:rotate(45deg);
327
    -moz-transform:rotate(45deg);
328
    -ms-transform:rotate(45deg);
329
    -o-transform:rotate(45deg);
330
    transform:rotate(45deg);
331
    -webkit-box-shadow:
332
        134px -66px 0 #FFF,
333
        170px -30px 0 #FFF,
334
        140px 0px 0 #FFF,
335
        100px 40px 0 #FFF,
336
        100px -100px 0 #FFF,
337
        70px -70px 0 #FFF,
338
        30px -30px 0 #FFF,
339
        36px 36px 0 #FFF,
340
        71px 71px 0 #FFF
341
    ;
342
    -moz-box-shadow:
343
        134px -66px 0 #FFF,
344
        170px -30px 0 #FFF,
345
        140px 0px 0 #FFF,
346
        100px 40px 0 #FFF,
347
        100px -100px 0 #FFF,
348
        70px -70px 0 #FFF,
349
        30px -30px 0 #FFF,
350
        36px 36px 0 #FFF,
351
        71px 71px 0 #FFF
352
    ;
353
    box-shadow:
354
        134px -66px 0 #FFF,
355
        170px -30px 0 #FFF,
356
        140px 0px 0 #FFF,
357
        100px 40px 0 #FFF,
358
        100px -100px 0 #FFF,
359
        70px -70px 0 #FFF,
360
        30px -30px 0 #FFF,
361
        36px 36px 0 #FFF,
362
        71px 71px 0 #FFF
363
    ;
364
}
365
.SpeechBalloon.type5:after {
366
    position:absolute;
367
    top:-30px;
368
    left:-30px;
369
    content:'';
370
    display:block;
371
    width:60px;
372
    height:60px;
373
    background:#FF54AC;
374
    z-index:-1;
375
    -webkit-transform:rotate(45deg);
376
    -moz-transform:rotate(45deg);
377
    -ms-transform:rotate(45deg);
378
    -o-transform:rotate(45deg);
379
    transform:rotate(45deg);
380
    -webkit-box-shadow:
381
        134px -66px 0 #FF54AC,
382
        170px -30px 0 #FF54AC,
383
        140px 0px 0 #FF54AC,
384
        100px 40px 0 #FF54AC,
385
        100px -100px 0 #FF54AC,
386
        70px -70px 0 #FF54AC,
387
        30px -30px 0 #FF54AC,
388
        36px 36px 0 #FF54AC,
389
        71px 71px 0 #FF54AC
390
    ;
391
    -moz-box-shadow:
392
        134px -66px 0 #FF54AC,
393
        170px -30px 0 #FF54AC,
394
        140px 0px 0 #FF54AC,
395
        100px 40px 0 #FF54AC,
396
        100px -100px 0 #FF54AC,
397
        70px -70px 0 #FF54AC,
398
        30px -30px 0 #FF54AC,
399
        36px 36px 0 #FF54AC,
400
        71px 71px 0 #FF54AC
401
    ;
402
    box-shadow:
403
        134px -66px 0 #FF54AC,
404
        170px -30px 0 #FF54AC,
405
        140px 0px 0 #FF54AC,
406
        100px 40px 0 #FF54AC,
407
        100px -100px 0 #FF54AC,
408
        70px -70px 0 #FF54AC,
409
        30px -30px 0 #FF54AC,
410
        36px 36px 0 #FF54AC,
411
        71px 71px 0 #FF54AC
412
    ;
413
}
414
.SpeechBalloon.type5 p {
415
    position:relative;
416
    z-index:2;
417
    height:100px;
418
    font-size:14px;
419
    line-height:100px;
420
    color:#FF54AC;
421
    text-align:center;
422
}
 

Cute Bubbles

CSSDeck G+