Ajax Loader
HTML 
<div id="room">
1
<div id="room">
2
  <div id="wrap">
3
    <div id="lamp">
4
    </div>
5
  </div>
6
  <div id="bounce">
7
  </div>
8
  <div id="window">
9
    <span>&#9733;</span>
10
    <span>&#9733;</span>
11
    <span>&#9733;</span>
12
    <span>&#9733;</span>
13
    <span>&#9733;</span>
14
  </div>
15
  <div id="plinth"></div>
16
  <div id="floor">
17
  </div>
18
</div>
 
CSS 
body{
1
body{
2
  background-color: black;
3
  -moz-animation: 20s changing-background infinite;
4
  -webkit-animation: 20s changing-background infinite;
5
  animation: 20s changing-background infinite;
6
}
7
div#room{
8
  background:
9
    repeating-linear-gradient(90deg,
10
    #29303C 0%,#29303C 0.079%,#D7D6D4 0.5%,
11
    #D7D6D4 0.75%,#2D3643 0.9%,
12
    #2D3643 3.67%,#D7D6D4 3%,
13
    #D7D6D4 3.9%,#29303C 4%,
14
    #29303C 3%,transparent 4.5%,transparent 10%) 15px,
15
    radial-gradient(ellipse 25em 15em,#5F87A8 70%,#4D6D88);
16
  background-image:    -moz-repeating-linear-gradient(90deg,
17
    #29303C 0%,#29303C 0.079%,#D7D6D4 0.5%,
18
    #D7D6D4 0.75%,#2D3643 0.9%,
19
    #2D3643 3.67%,#D7D6D4 3%,
20
    #D7D6D4 3.9%,#29303C 4%,
21
    #29303C 3%,transparent 4.5%,transparent 10%) 15px,
22
    -webkit-radial-gradient(ellipse 25em 15em,#5F87A8 70%,#4D6D88);
23
  background-color: purple;
24
  -o-border: 1px solid black;
25
  -webkit-border: 1px solid black;
26
  border: 1px solid black;
27
  min-width: 800px;
28
  width: 80%;
29
  margin: 50px auto;
30
  position: relative;
31
  overflow: hidden;
32
  height: 430px;
33
  z-index: 1;
34
  -moz-box-shadow: 0px 0px 50px 3px hsl(0,0%,50%);
35
  -webkit-box-shadow: 0px 0px 50px 3px hsl(0,0%,50%);
36
  box-shadow: 0px 0px 50px 3px hsl(0,0%,50%);
37
  -webkit-animation: 8s shake 3;
38
  -moz-animation: 8s shake 3;
39
  animation: 8s shake 3;
40
}
41
div#wrap{
42
  -moz-animation: 8s joggle 3;
43
  -webkit-animation: 8s joggle 3;
44
  animation: 8s joggle 3;
45
}
46
div#lamp{
47
  width: 5px;
48
  height: 140px;
49
  background: hsl(0,3%,70%);
50
  position: relative;
51
  margin: 0px calc(50% - 25px);
52
  margin: 0px -moz-calc(50% - 25px);
53
  margin: 0px -webkit-calc(50% - 25px);
54
}
55
div#lamp::after{
56
  content: '';
57
  display: block;
58
  width: 20px;
59
  height: 30px;
60
  -moz-border-radius: 50%;
61
  -webkit-border-radius: 50%;
62
  border-radius: 50%;
63
  -moz-box-shadow: 0px 25px 50px 35px #EEC072;
64
  -webkit-box-shadow: 0px 25px 50px 35px #EEC072;
65
  box-shadow: 0px 25px 50px 35px #EEC072;
66
  position: absolute;
67
  background: white;
68
  top: 57%;
69
  left: -7px;
70
  z-index: 1;
71
  -moz-animation: 2s lighting infinite;
72
  -webkit-animation: 2s lighting infinite;
73
  animation: 2s lighting infinite;
74
}
75
div#lamp::before{
76
  content: '';
77
  display: block;
78
  -o-border: 50px solid transparent;
79
  -moz-border: 50px solid transparent;
80
  -webkit-border: 50px solid transparent;
81
  border: 50px solid transparent;
82
  border-bottom: 50px solid hsl(0,3%,70%);
83
  box-shadow: 0px 10px 10px -7px #FEFFFC;
84
  position: absolute;
85
  left: -47px;
86
  z-index: 2;
87
}
88
div#bounce{
89
  width: 80px;
90
  height: 80px;
91
  -moz-border-radius: 50%;
92
  -webkit-border-radius: 50%;
93
  border-radius: 50%;
94
  background: hsl(0,100%,50%);
95
  position: relative;
96
  top: 48.8%;
97
  left: 44%;
98
  -moz-animation: 8s bounce-jump 3;
99
  -webkit-animation: 8s bounce-jump 3;
100
  animation: 8s bounce-jump 3;
101
}
102
div#bounce::before{
103
  content: '';
104
  display: block;
105
  width: 40px;
106
  height: 35px;
107
  background: hsl(0,100%,50%);
108
  -moz-border-radius: 50%;
109
  -webkit-border-radius: 50%;
110
  border-radius: 50%;
111
  -moz-box-shadow: 5px 4px 1px -4px #ccc;
112
  -webkit-box-shadow: 5px 4px 1px -4px #ccc;
113
  box-shadow: 5px 4px 1px -4px #ccc;
114
  position: absolute;
115
  left: 33%;
116
  top: 40%;
117
}
118
div#bounce::after{
119
  content: '';
120
  display: block;
121
  width: 100%;
122
  position: absolute;
123
  -moz-border-radius: 50%/30%;
124
  -webkit-border-radius: 50%/30%;
125
  border-radius: 50%/30%;
126
  -moz-box-shadow: 3px 40px 25px -4px black;
127
  -webkit-box-shadow: 3px 40px 25px -4px black;
128
  box-shadow: 3px 40px 25px -4px black;
129
  background: transparent;
130
  left: 0%;
131
  top: 60%;
132
  height: 10px;
133
  -moz-animation: 8s shadow 3;
134
  -webkit-animation: 8s shadow 3;
135
  animation: 8s shadow 3;
136
}
137
div#window{
138
  width: 150px;
139
  height: 250px;
140
  border: 10px solid hsl(0,50%,22%);
141
  position: relative;
142
  top: -40%;
143
  left: 75%;
144
  background:
145
    linear-gradient(#0A2164,#1F6ED5);
146
  background-image: -webkit-linear-gradient(#0A2164,#1F6ED5),
147
    -moz-linear-gradient(#0A2164,#1F6ED5);
148
  -moz-box-shadow: 0px -30px 50px -20px #B5B9A8 inset, 0px 0px 10px 3px hsl(0,2%,10%);
149
  -webkit-box-shadow: 0px -30px 50px -20px #B5B9A8 inset, 0px 0px 10px 3px hsl(0,2%,10%);
150
  box-shadow: 0px -30px 50px -20px #B5B9A8 inset, 0px 0px 10px 3px hsl(0,2%,10%);
151
  overflow: hidden;
152
}
153
div#window::before{
154
  width: 100%;
155
  content: '';
156
  display: block;
157
  position: absolute;
158
  height: 10px;
159
  background: hsl(0,50%,22%);
160
  top: 40%;
161
  z-index: 2;
162
}
163
div#window::after{
164
  content: '';
165
  display: block;
166
  position: absolute;
167
  width: 10px;
168
  height: 40%;
169
  background: hsl(0,50%,22%);
170
  z-index: 2;
171
  left: 50%;
172
}
173
div#window span{
174
  color: white;
175
  display: block;
176
  position: absolute;
177
  -moz-animation: 2s starlight infinite;
178
  -webkit-animation: 2s starlight infinite;
179
  animation: 2s starlight infinite;
180
  text-shadow: 0px 0px 10px white;
181
}
182
div#window span:nth-child(1){
183
  top: 50%;
184
  left: 30%;
185
}
186
div#window span:nth-child(2){
187
  top: 20%;
188
  left: 70%;
189
}
190
div#window span:nth-child(3){
191
  top: 10%;
192
  left: 15%;
193
}
194
div#window span:nth-child(4){
195
  top: 30%;
196
  left: 40%;
197
}
198
div#window span:nth-child(5){
199
  top: 10px;
200
  left: -35px;
201
  -moz-animation: 2s stellae-caducae 2 cubic-bezier(.99,.04,1,1.34);
202
  -webkit-animation: 2s stellae-caducae 2 cubic-bezier(.99,.04,1,1.34);
203
  animation: 2s stellae-caducae 2 cubic-bezier(.99,.04,1,1.34);
204
  color: yellow;
205
}
206
div#plinth{
207
  background-color: #7D5F54;
208
  width: 100%;
209
  position: absolute;
210
  height: 20px;
211
  top: 84.875%;
212
  z-index: -1;
213
  -moz-border-radius: 3px/10px 10px 0px 0px;
214
  -webkit-border-radius: 3px/10px 10px 0px 0px;
215
  border-radius: 3px/10px 10px 0px 0px;
216
  -moz-box-shadow: 0px 5px 2px -2px #4B2F23 inset, 0px -5px 2px -1px #4B3124 inset;
217
  -webkit-box-shadow: 0px 5px 2px -2px #4B2F23 inset, 0px -5px 2px -1px #4B3124 inset;
218
  box-shadow: 0px 5px 2px -2px #4B2F23 inset, 0px -5px 2px -1px #4B3124 inset;
219
}
220
div#floor{
221
  width: 100%;
222
  position: absolute;
223
  height: 45px;
224
  background-color: #EBB366;
225
  background-image: repeating-linear-gradient(45deg,transparent 0%,transparent 3%,hsl(0,3%,50%) 3%,hsl(0,3%,50%) 3.1%,#D77B30 3.3%),
226
    repeating-linear-gradient(-45deg,transparent 0%,#D77B30 3%,hsl(0,3%,50%) 3%,hsl(0,3%,50%) 3.1%,transparent 3.3%);
227
  background-image: -webkit-repeating-linear-gradient(45deg,transparent 0%,transparent 3%,hsl(0,3%,50%) 3%,hsl(0,3%,50%) 3.1%,#D77B30 3.3%),-moz-repeating-linear-gradient(45deg,transparent 0%,transparent 3%,hsl(0,3%,50%) 3%,hsl(0,3%,50%) 3.1%,#D77B30 3.3%);
228
  z-index: -1;
229
  top: calc(100% - 45px);
230
  top: -moz-calc(100% - 45px);
231
  top: -webkit-calc(100% - 45px);
232
}
233
@-moz-keyframes changing-background{
234
    0%{
235
    background: black;
236
  }
237
  20%{
238
    background: hsl(0,0%,5%);
239
  }
240
  40%{
241
    background: hsl(0,0%,10%);
242
  }
243
  60%{
244
    background: hsl(0,0%,3%);
245
  }
246
  70%{
247
    background: hsl(0,0%,6%);
248
  }
249
  70.1%{
250
    background: hsl(0,0%,2%);
251
  }
252
  70.2%{
253
    background: hsl(0,0,15%);
254
  }
255
  100%{
256
    background: black;
257
  }
258
}
259
@-webkit-keyframes changing-background{
260
    0%{
261
    background: black;
262
  }
263
  20%{
264
    background: hsl(0,0%,5%);
265
  }
266
  40%{
267
    background: hsl(0,0%,10%);
268
  }
269
  60%{
270
    background: hsl(0,0%,3%);
271
  }
272
  70%{
273
    background: hsl(0,0%,6%);
274
  }
275
  70.1%{
276
    background: hsl(0,0%,2%);
277
  }
278
  70.2%{
279
    background: hsl(0,0,15%);
280
  }
281
  100%{
282
    background: black;
283
  }
284
}
285
@keyframes changing-background{
286
  0%{
287
    background: black;
288
  }
289
  20%{
290
    background: hsl(0,0%,5%);
291
  }
292
  40%{
293
    background: hsl(0,0%,10%);
294
  }
295
  60%{
296
    background: hsl(0,0%,3%);
297
  }
298
  70%{
299
    background: hsl(0,0%,6%);
300
  }
301
  70.1%{
302
    background: hsl(0,0%,2%);
303
  }
304
  70.2%{
305
    background: hsl(0,0,15%);
306
  }
307
  100%{
308
    background: black;
309
  }
310
}
311
@-moz-keyframes starlight{
312
  0%{
313
    text-shadow: 0px 0px 6px;
314
  }
315
  25%{
316
    text-shadow: 0px 0px 15px;
317
  }
318
  50%{
319
    text-shadow: 0px 0px 10px;
320
  }
321
  75%{
322
    text-shadow: 0px 0px 16px;
323
  }
324
  100%{
325
    text-shadow: 0px 0px 7px;
326
  }
327
}
328
@-webkit-keyframes starlight{
329
  0%{
330
    text-shadow: 0px 0px 6px;
331
  }
332
  25%{
333
    text-shadow: 0px 0px 15px;
334
  }
335
  50%{
336
    text-shadow: 0px 0px 10px;
337
  }
338
  75%{
339
    text-shadow: 0px 0px 16px;
340
  }
341
  100%{
342
    text-shadow: 0px 0px 7px;
343
  }
344
}
345
@keyframes starlight{
346
  0%{
347
    text-shadow: 0px 0px 6px;
348
  }
349
  25%{
350
    text-shadow: 0px 0px 15px;
351
  }
352
  50%{
353
    text-shadow: 0px 0px 10px;
354
  }
355
  75%{
356
    text-shadow: 0px 0px 16px;
357
  }
358
  100%{
359
    text-shadow: 0px 0px 7px;
360
  }
361
}
362
@-moz-keyframes stellae-caducae{
363
  0%{
364
    top: 25px;
365
    left: -35px;
366
    text-shadow: 0px 0px 7px yellow;
367
  }
368
  100%{
369
    top: 150px;
370
    left: 180px;
371
    text-shadow: 0px 0px 10px yellow;
372
  }
373
}
374
@-webkit-keyframes stellae-caducae{
375
  0%{
376
    top: 25px;
377
    left: -35px;
378
    text-shadow: 0px 0px 7px yellow;
379
  }
380
  100%{
381
    top: 150px;
382
    left: 180px;
383
    text-shadow: 0px 0px 10px yellow;
384
  }
385
}
386
@keyframes stellae-caducae{
387
  0%{
388
    top: 25px;
389
    left: -35px;
390
    text-shadow: 0px 0px 7px yellow;
391
  }
392
  100%{
393
    top: 150px;
394
    left: 180px;
395
    text-shadow: 0px 0px 10px yellow;
396
  }
397
}
398
@-moz-keyframes bounce-jump{
399
    0%{
400
    top: 48.8%;
401
  }
402
  10%{
403
    top: -20%;
404
    left: -1%;
405
  }
406
  20%{
407
    top: 48.8%;
408
    left: 30%;
409
  }
410
  25%{
411
    top: 0%;
412
  }
413
  30%{
414
    left: 30%;
415
  }
416
  35%{
417
    top: 48.8%;
418
  }
419
  45%{
420
    top: 0%;
421
  }
422
  50%{
423
    top: 46%;
424
  }
425
  67%{
426
    top: 48.8%;
427
  }
428
  80%{
429
    top: 44%;
430
  }
431
  85%{
432
     top: 48.8%;
433
  }
434
  90%{
435
    top: 42%;
436
  }
437
  95%{
438
    top: 48.8%;
439
  }
440
  100%{
441
    top: 48.8%;
442
  }
443
}
444
@-webkit-keyframes bounce-jump{
445
    0%{
446
    top: 48.8%;
447
  }
448
  10%{
449
    top: -20%;
450
    left: -1%;
451
  }
452
  20%{
453
    top: 48.8%;
454
    left: 30%;
455
  }
456
  25%{
457
    top: 0%;
458
  }
459
  30%{
460
    left: 30%;
461
  }
462
  35%{
463
    top: 48.8%;
464
  }
465
  45%{
466
    top: 0%;
467
  }
468
  50%{
469
    top: 46%;
470
  }
471
  67%{
472
    top: 48.8%;
473
  }
474
  80%{
475
    top: 44%;
476
  }
477
  85%{
478
     top: 48.8%;
479
  }
480
  90%{
481
    top: 42%;
482
  }
483
  95%{
484
    top: 48.8%;
485
  }
486
  100%{
487
    top: 48.8%;
488
  }
489
}
490
@keyframes bounce-jump{
491
  0%{
492
    top: 48.8%;
493
  }
494
  10%{
495
    top: -20%;
496
    left: -1%;
497
  }
498
  20%{
499
    top: 48.8%;
500
    left: 30%;
501
  }
502
  25%{
503
    top: 0%;
504
  }
505
  30%{
506
    left: 30%;
507
  }
508
  35%{
509
    top: 48.8%;
510
  }
511
  45%{
512
    top: 0%;
513
  }
514
  50%{
515
    top: 46%;
516
  }
517
  67%{
518
    top: 48.8%;
519
  }
520
  80%{
521
    top: 44%;
522
  }
523
  85%{
524
     top: 48.8%;
525
  }
526
  90%{
527
    top: 42%;
528
  }
529
  95%{
530
    top: 48.8%;
531
  }
532
  100%{
533
    top: 48.8%;
534
  }
535
}
536
@-moz-keyframes lighting{
537
  0%{
538
    box-shadow: 0px 25px 50px 35px #EEC072;
539
  }
540
  25%{
541
    box-shadow: 0px 25px 45px 30px hsl(38,58%,69%);
542
  }
543
  50%{
544
    box-shadow: 0px 25px 50px 35px hsl(38,58%,74%);
545
  }
546
  75%{
547
    box-shadow: 0px 25px 50px 35px hsl(38,58%,69%);
548
  }
549
  100%{
550
    box-shadow: 0px 25px 50px 35px hsl(38,58%,69%);
551
  }
552
}
553
@-webkit-keyframes lighting{
554
  0%{
555
    box-shadow: 0px 25px 50px 35px #EEC072;
556
  }
557
  25%{
558
    box-shadow: 0px 25px 45px 30px hsl(38,58%,69%);
559
  }
560
  50%{
561
    box-shadow: 0px 25px 50px 35px hsl(38,58%,74%);
562
  }
563
  75%{
564
    box-shadow: 0px 25px 50px 35px hsl(38,58%,69%);
565
  }
566
  100%{
567
    box-shadow: 0px 25px 50px 35px hsl(38,58%,69%);
568
  }
569
}
570
@keyframes lighting{
571
  0%{
572
    box-shadow: 0px 25px 50px 35px #EEC072;
573
  }
574
  25%{
575
    box-shadow: 0px 25px 45px 30px hsl(38,58%,69%);
576
  }
577
  50%{
578
    box-shadow: 0px 25px 50px 35px hsl(38,58%,74%);
579
  }
580
  75%{
581
    box-shadow: 0px 25px 50px 35px hsl(38,58%,69%);
582
  }
583
  100%{
584
    box-shadow: 0px 25px 50px 35px hsl(38,58%,69%);
585
  }
586
}
587
@-moz-keyframes joggle{
588
  0%{
589
    margin-left: 0px;
590
  }
591
  25%{
592
    margin-left: 50px;
593
  }
594
  35%{
595
    transform: rotate(13deg);
596
  }
597
  55%{
598
    transform: rotate(-1deg);
599
  }
600
  100%{
601
    margin-left: 0px;
602
  }
603
}
604
@-webkit-keyframes joggle{
605
  0%{
606
    margin-left: 0px;
607
  }
608
  25%{
609
    margin-left: 50px;
610
  }
611
  35%{
612
    transform: rotate(13deg);
613
  }
614
  55%{
615
    transform: rotate(-1deg);
616
  }
617
  100%{
618
    margin-left: 0px;
619
  }
620
}
621
@keyframes joggle{
622
  0%{
623
    margin-left: 0px;
624
  }
625
  25%{
626
    margin-left: 50px;
627
  }
628
  35%{
629
    transform: rotate(13deg);
630
  }
631
  55%{
632
    transform: rotate(-1deg);
633
  }
634
  100%{
635
    margin-left: 0px;
636
  }
637
}
638
@-moz-keyframes shadow{
639
  0%{
640
    box-shadow: 3px 40px 35px -2px black;
641
  }
642
  10%{
643
    box-shadow: 3px 300px 35px 6px black;
644
  }
645
  20%{
646
    box-shadow: 3px 40px 25px -4px black;
647
  }
648
  25%{
649
    box-shadow: 3px 220px 25px 6px black;
650
  }
651
  45%{
652
    box-shadow: 3px 220px 25px 6px black;
653
  }
654
  50%{
655
    box-shadow: 3px 40px 20px -4px black;
656
  }
657
  100%{
658
    box-shadow: 3px 40px 15px -4px black;
659
  }
660
}
661
@-webkit-keyframes shadow{
662
  0%{
663
    box-shadow: 3px 40px 35px -2px black;
664
  }
665
  10%{
666
    box-shadow: 3px 300px 35px 6px black;
667
  }
668
  20%{
669
    box-shadow: 3px 40px 25px -4px black;
670
  }
671
  25%{
672
    box-shadow: 3px 220px 25px 6px black;
673
  }
674
  45%{
675
    box-shadow: 3px 220px 25px 6px black;
676
  }
677
  50%{
678
    box-shadow: 3px 40px 20px -4px black;
679
  }
680
  100%{
681
    box-shadow: 3px 40px 15px -4px black;
682
  }
683
}
684
@keyframes shadow{
685
  0%{
686
    box-shadow: 3px 40px 35px -2px black;
687
  }
688
  10%{
689
    box-shadow: 3px 300px 35px 6px black;
690
  }
691
  20%{
692
    box-shadow: 3px 40px 25px -4px black;
693
  }
694
  25%{
695
    box-shadow: 3px 220px 25px 6px black;
696
  }
697
  45%{
698
    box-shadow: 3px 220px 25px 6px black;
699
  }
700
  50%{
701
    box-shadow: 3px 40px 20px -4px black;
702
  }
703
  100%{
704
    box-shadow: 3px 40px 15px -4px black;
705
  }
706
}
707
@-moz-keyframes shake{
708
  0%{
709
    width: 650px;
710
    transform: scale(1);
711
  }
712
  10%{
713
    margin-left: 93px;
714
  }
715
  12%{
716
    margin-left: 88px;
717
    margin-top: 55px;
718
  }
719
  14%{
720
    margin-top: 45px;
721
    margin-left: 98px;
722
  }
723
  16%{
724
    margin-top: 54px;
725
    margin-left: 89px;
726
  }
727
  18%{
728
    margin-top: 46px;
729
    margin-left: 97px;
730
  }
731
  20%{
732
    margin-top: 50px;
733
    margin-left: 93px;
734
  }
735
}
736
@-webkit-keyframes shake{
737
  0%{
738
    width: 650px;
739
    transform: scale(1);
740
  }
741
  10%{
742
    margin-left: 93px;
743
  }
744
  12%{
745
    margin-left: 88px;
746
    margin-top: 55px;
747
  }
748
  14%{
749
    margin-top: 45px;
750
    margin-left: 98px;
751
  }
752
  16%{
753
    margin-top: 54px;
754
    margin-left: 89px;
755
  }
756
  18%{
757
    margin-top: 46px;
758
    margin-left: 97px;
759
  }
760
  20%{
761
    margin-top: 50px;
762
    margin-left: 93px;
763
  }
764
}
765
@keyframes shake{
766
  0%{
767
    width: 650px;
768
    transform: scale(1);
769
  }
770
  10%{
771
    margin-left: 93px;
772
  }
773
  12%{
774
    margin-left: 88px;
775
    margin-top: 55px;
776
  }
777
  14%{
778
    margin-top: 45px;
779
    margin-left: 98px;
780
  }
781
  16%{
782
    margin-top: 54px;
783
    margin-left: 89px;
784
  }
785
  18%{
786
    margin-top: 46px;
787
    margin-left: 97px;
788
  }
789
  20%{
790
    margin-top: 50px;
791
    margin-left: 93px;
792
  }
793
}
 

CSS Room Animated Objects

CSSDeck G+