Ajax Loader
HTML 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2
"http://www.w3.org/TR/html4/loose.dtd">
3
<html>
4
<head>
5
 <title>Semis-Art - Design & Build Beautiful Crafted Web Experiences</title>
6
 <meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
7
<link rel="Shortcut icon" href="images/ico.png">
8
 <link rel="stylesheet" type="text/css" href="css/styleie.css" >
9
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,800,300' rel='stylesheet' type='text/css'>
10
<link rel="stylesheet" href="css/font-awesome.css">
11
</head>
12
<body>
13
 
14
<div class="header">
15
 
16
<p>I'm sorry, but your browser isn't supprorted on this website.</p>
17
 
18
    </div>
19
20
<div id="Wrapper">
21
  
22
    <div id="icon"> <img src="http://oi57.tinypic.com/mo4th.jpg"> </div> <div id="iconShadow"></div>
23
</div>
24
 
25
 
26
 
27
 
28
</body>
29
</html>
 
CSS 
body{
1
body{
2
overflow: hidden;
3
    background-color:#00BD3C;
4
}
5
.header{
6
width:100%;
7
height:auto;
8
position:absolute;
9
top:0px;
10
left:0px;
11
background-color: #262b37;
12
}
13
.header p{
14
  color: #c3c8d6;
15
  font-family: 'Open Sans', sans-serif;
16
  font-size:16px;
17
  line-height:21px;
18
  font-weight:400;
19
  padding:10px;
20
  margin:0px;
21
}
22
#Wrapper{
23
    width:500px;
24
    height:500px;
25
    position: absolute;
26
    top:50px;
27
    left:50%;
28
    margin-left:-250px;
29
}
30
 
31
#icon {
32
width:150px;
33
height:150px;
34
position: absolute;
35
    left:50%;
36
    margin-left:-163px;
37
-ms-transform: scale(0.5,0.5); /* IE 9 */
38
-webkit-transform: scale(0.5,0.5); /* Chrome, Safari, Opera */
39
transform: scale(0.5,0.5);
40
  top:0;
41
  z-index: 11;
42
  -webkit-animation: jump 1s infinite;
43
  -moz-animation: jump 1s infinite;
44
  -o-animation: jump 1s infinite;
45
  -ms-animation: jump 1s infinite;
46
  animation: jump 1s infinite;
47
}
48
 
49
 
50
 
51
 
52
 
53
@keyframes jump {
54
    0% {
55
        top: 0px;
56
    }
57
    50% {
58
        top: 140px;
59
        height: 140px;
60
    }
61
    55% {
62
        top: 160px;
63
        height: 120px;
64
    }
65
    65% {
66
        top: 120px;
67
        height: 140px;
68
        border-radius: 70px;
69
    }
70
    95% {
71
        top: 0px;
72
    }
73
    100% {
74
        top: 0px;
75
    }
76
}
77
#iconShadow {
78
  position: absolute;
79
  left: 50%;
80
  bottom: 80px;
81
  z-index: 10;
82
  margin-left: -30px;
83
  width: 60px;
84
  height: 75px;
85
  background: rgba(20, 20, 20, .1);
86
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
87
  border-radius: 30px / 40px;
88
  -webkit-transform: scaleY(.3);
89
  -moz-transform: scaleY(.3);
90
  -ms-transform: scaleY(.3);
91
  -o-transform: scaleY(.3);
92
  transform: scaleY(.3);
93
  -webkit-animation: shrink 1s infinite;
94
  -moz-animation: shrink 1s infinite;
95
  -o-animation: shrink 1s infinite;
96
  -ms-animation: shrink 1s infinite;
97
  animation: shrink 1s infinite;
98
}
99
@-webkit-keyframes jump {
100
  0% {top: 0px;
101
    -webkit-animation-timing-function: ease-in;
102
  }
103
  40% {}
104
  50% {top: 140px;
105
    height: 140px;
106
    -webkit-animation-timing-function: ease-out;
107
  }
108
  55% {top: 160px; height: 120px; border-radius: 70px / 60px;
109
    -webkit-animation-timing-function: ease-in;}
110
  65% {top: 120px; height: 140px; border-radius: 70px;
111
    -webkit-animation-timing-function: ease-out;}
112
  95% {
113
    top: 0px;
114
    -webkit-animation-timing-function: ease-in;
115
  }
116
  100% {top: 0px;
117
    -webkit-animation-timing-function: ease-in;
118
  }
119
}
120
@-moz-keyframes jump {
121
  0% {top: 10px;
122
    -moz-animation-timing-function: ease-in;
123
  }
124
  40% {}
125
  50% {top: 140px;
126
    height: 140px;
127
    -moz-animation-timing-function: ease-out;
128
  }
129
  55% {top: 160px; height: 120px; border-radius: 70px / 60px;
130
    -moz-animation-timing-function: ease-in;}
131
  65% {top: 120px; height: 140px; border-radius: 70px;
132
    -moz-animation-timing-function: ease-out;}
133
  95% {
134
    top: 10px;
135
    -moz-animation-timing-function: ease-in;
136
  }
137
  100% {top: 10px;
138
    -moz-animation-timing-function: ease-in;
139
  }
140
}
141
@-o-keyframes jump {
142
  0% {top: 10px;
143
    -o-animation-timing-function: ease-in;
144
  }
145
  40% {}
146
  50% {top: 140px;
147
    height: 140px;
148
    -o-animation-timing-function: ease-out;
149
  }
150
  55% {top: 160px; height: 120px; border-radius: 70px / 60px;
151
    -o-animation-timing-function: ease-in;}
152
  65% {top: 120px; height: 140px; border-radius: 70px;
153
    -o-animation-timing-function: ease-out;}
154
  95% {
155
    top: 10px;
156
    -o-animation-timing-function: ease-in;
157
  }
158
  100% {top: 10px;
159
    -o-animation-timing-function: ease-in;
160
  }
161
}
162
@-ms-keyframes jump {
163
  0% {top: 10px;
164
    -ms-animation-timing-function: ease-in;
165
  }
166
  40% {}
167
  50% {top: 140px;
168
    height: 140px;
169
    -ms-animation-timing-function: ease-out;
170
  }
171
  55% {top: 160px; height: 120px; border-radius: 70px / 60px;
172
    -ms-animation-timing-function: ease-in;}
173
  65% {top: 120px; height: 140px; border-radius: 70px;
174
    -ms-animation-timing-function: ease-out;}
175
  95% {
176
    top: 10px;
177
    -ms-animation-timing-function: ease-in;
178
  }
179
  100% {top: 10px;
180
    -ms-animation-timing-function: ease-in;
181
  }
182
}
183
@keyframes jump {
184
  0% {
185
    top: 10px;
186
    animation-timing-function: ease-in;
187
  }
188
  50% {
189
    top: 140px;
190
    height: 140px;
191
    animation-timing-function: ease-out;
192
  }
193
  55% {
194
    top: 160px;
195
    height: 120px;
196
    border-radius: 70px / 60px;
197
    animation-timing-function: ease-in;
198
  }
199
  65% {
200
    top: 120px;
201
    height: 140px;
202
    border-radius: 70px;
203
    animation-timing-function: ease-out;
204
  }
205
  95% {
206
    top: 10px;
207
    animation-timing-function: ease-in;
208
  }
209
  100% {
210
    top: 10px;
211
    animation-timing-function: ease-in;
212
  }
213
}
214
@-webkit-keyframes shrink {
215
  0% {
216
    bottom: 0;
217
    margin-left: -30px;
218
    width: 60px;
219
    height: 75px;
220
    background: rgba(20, 20, 20, .1);
221
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
222
    border-radius: 30px / 40px;
223
    -webkit-animation-timing-function: ease-in;
224
  }
225
  50% {
226
    bottom: 30px;
227
    margin-left: -10px;
228
    width: 20px;
229
    height: 5px;
230
    background: rgba(20, 20, 20, .3);
231
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
232
    border-radius: 20px / 20px;
233
    -webkit-animation-timing-function: ease-out;
234
  }
235
  100% {
236
    bottom: 0;
237
    margin-left: -30px;
238
    width: 60px;
239
    height: 75px;
240
    background: rgba(20, 20, 20, .1);
241
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
242
    border-radius: 30px / 40px;
243
    -webkit-animation-timing-function: ease-in;
244
  }
245
}
246
@-moz-keyframes shrink {
247
  0% {
248
    bottom: 0;
249
    margin-left: -30px;
250
    width: 60px;
251
    height: 75px;
252
    background: rgba(20, 20, 20, .1);
253
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
254
    border-radius: 30px / 40px;
255
    -moz-animation-timing-function: ease-in;
256
  }
257
  50% {
258
    bottom: 30px;
259
    margin-left: -10px;
260
    width: 20px;
261
    height: 5px;
262
    background: rgba(20, 20, 20, .3);
263
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
264
    border-radius: 20px / 20px;
265
    -moz-animation-timing-function: ease-out;
266
  }
267
  100% {
268
    bottom: 0;
269
    margin-left: -30px;
270
    width: 60px;
271
    height: 75px;
272
    background: rgba(20, 20, 20, .1);
273
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
274
    border-radius: 30px / 40px;
275
    -moz-animation-timing-function: ease-in;
276
  }
277
}
278
@-o-keyframes shrink {
279
  0% {
280
    bottom: 0;
281
    margin-left: -30px;
282
    width: 60px;
283
    height: 75px;
284
    background: rgba(20, 20, 20, .1);
285
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
286
    border-radius: 30px / 40px;
287
    -o-animation-timing-function: ease-in;
288
  }
289
  50% {
290
    bottom: 30px;
291
    margin-left: -10px;
292
    width: 20px;
293
    height: 5px;
294
    background: rgba(20, 20, 20, .3);
295
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
296
    border-radius: 20px / 20px;
297
    -o-animation-timing-function: ease-out;
298
  }
299
  100% {
300
    bottom: 0;
301
    margin-left: -30px;
302
    width: 60px;
303
    height: 75px;
304
    background: rgba(20, 20, 20, .1);
305
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
306
    border-radius: 30px / 40px;
307
    -o-animation-timing-function: ease-in;
308
  }
309
}
310
@-ms-keyframes shrink {
311
  0% {
312
    bottom: 0;
313
    margin-left: -30px;
314
    width: 60px;
315
    height: 75px;
316
    background: rgba(20, 20, 20, .1);
317
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
318
    border-radius: 30px / 40px;
319
    -ms-animation-timing-function: ease-in;
320
  }
321
  50% {
322
    bottom: 30px;
323
    margin-left: -10px;
324
    width: 20px;
325
    height: 5px;
326
    background: rgba(20, 20, 20, .3);
327
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
328
    border-radius: 20px / 20px;
329
    -ms-animation-timing-function: ease-out;
330
  }
331
  100% {
332
    bottom: 0;
333
    margin-left: -30px;
334
    width: 60px;
335
    height: 75px;
336
    background: rgba(20, 20, 20, .1);
337
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
338
    border-radius: 30px / 40px;
339
    -ms-animation-timing-function: ease-in;
340
  }
341
}
342
@keyframes shrink {
343
  0% {
344
    bottom: 0;
345
    margin-left: -30px;
346
    width: 60px;
347
    height: 75px;
348
    background: rgba(20, 20, 20, .1);
349
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
350
    border-radius: 30px / 40px;
351
    animation-timing-function: ease-in;
352
  }
353
  50% {
354
    bottom: 30px;
355
    margin-left: -10px;
356
    width: 20px;
357
    height: 5px;
358
    background: rgba(20, 20, 20, .3);
359
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
360
    border-radius: 20px / 20px;
361
    animation-timing-function: ease-out;
362
  }
363
  100% {
364
    bottom: 0;
365
    margin-left: -30px;
366
    width: 60px;
367
    height: 75px;
368
    background: rgba(20, 20, 20, .1);
369
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
370
    border-radius: 30px / 40px;
371
    animation-timing-function: ease-in;
372
  }
373
}
374
 
375
 
376
 
377
.header {
378
 
379
  font-size: .8em;
380
 
381
  text-align: center;
382
 
383
  padding: 10px;
384
 
385
  background-color: #262b37;
386
 
387
  color: #fff;
388
 
389
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3);
390
 
391
  text-transform: uppercase;
392
 
393
  position: absolut;
394
 
395
  font-weight: bold;
396
 
397
398
  -webkit-animation: bounce 800ms ease-out;
399
 
400
  -moz-animation: bounce 800ms ease-out;
401
 
402
  -o-animation: bounce 800ms ease-out;
403
 
404
  animation: bounce 800ms ease-out;
405
 
406
}
407
 
408
 
409
/* Webkit, Chrome and Safari */
410
 
411
 
412
@-webkit-keyframes bounce {
413
 
414
  0% {
415
  -webkit-transform:translateY(-100%);
416
    opacity: 0;
417
  }
418
419
5% {
420
    -webkit-transform:translateY(-100%);
421
    opacity: 0;
422
  }
423
424
15% {
425
    -webkit-transform:translateY(0);
426
    padding-bottom: 5px;
427
  }
428
429
30% {
430
    -webkit-transform:translateY(-50%);
431
  }
432
433
40% {
434
    -webkit-transform:translateY(0%);
435
    padding-bottom: 6px;
436
  }
437
438
50% {
439
    -webkit-transform:translateY(-30%);
440
  }
441
442
70% {
443
    -webkit-transform:translateY(0%);
444
    padding-bottom: 7px;
445
  }
446
447
80% {
448
    -webkit-transform:translateY(-15%);
449
  }
450
451
90% {
452
    -webkit-transform:translateY(0%);
453
    padding-bottom: 8px;
454
  }
455
456
95% {
457
    -webkit-transform:translateY(-10%);
458
  }
459
460
97% {
461
    -webkit-transform:translateY(0%);
462
    padding-bottom: 9px;
463
  }
464
465
99% {
466
    -webkit-transform:translateY(-5%);
467
  }
468
469
100% {
470
    -webkit-transform:translateY(0);
471
472
padding-bottom: 9px;
473
  
474
opacity: 1;
475
  }
476
}
477
 
478
/* Mozilla Firefox 15 below */
479
@-moz-keyframes bounce {
480
  0% {
481
  -moz-transform:translateY(-100%);
482
    opacity: 0;
483
  }
484
  5% {
485
    -moz-transform:translateY(-100%);
486
    opacity: 0;
487
  }
488
  15% {
489
    -moz-transform:translateY(0);
490
    padding-bottom: 5px;
491
  }
492
  30% {
493
    -moz-transform:translateY(-50%);
494
  }
495
  40% {
496
    -moz-transform:translateY(0%);
497
    padding-bottom: 6px;
498
  }
499
  50% {
500
    -moz-transform:translateY(-30%);
501
  }
502
  70% {
503
    -moz-transform:translateY(0%);
504
    padding-bottom: 7px;
505
  }
506
  80% {
507
    -moz-transform:translateY(-15%);
508
  }
509
  90% {
510
    -moz-transform:translateY(0%);
511
    padding-bottom: 8px;
512
  }
513
  95% {
514
    -moz-transform:translateY(-10%);
515
  }
516
  97% {
517
    -moz-transform:translateY(0%);
518
    padding-bottom: 9px;
519
  }
520
  99% {
521
    -moz-transform:translateY(-5%);
522
  }
523
  100% {
524
    -moz-transform:translateY(0);
525
    padding-bottom: 9px;
526
    opacity: 1;
527
  }
528
}
529
 
530
/* Opera 12.0 */
531
@-o-keyframes bounce {
532
  0% {
533
  -o-transform:translateY(-100%);
534
    opacity: 0;
535
  }
536
  5% {
537
    -o-transform:translateY(-100%);
538
    opacity: 0;
539
  }
540
  15% {
541
    -o-transform:translateY(0);
542
    padding-bottom: 5px;
543
  }
544
  30% {
545
    -o-transform:translateY(-50%);
546
  }
547
  40% {
548
    -o-transform:translateY(0%);
549
    padding-bottom: 6px;
550
  }
551
  50% {
552
    -o-transform:translateY(-30%);
553
  }
554
  70% {
555
    -o-transform:translateY(0%);
556
    padding-bottom: 7px;
557
  }
558
  80% {
559
    -o-transform:translateY(-15%);
560
  }
561
  90% {
562
    -o-transform:translateY(0%);
563
    padding-bottom: 8px;
564
  }
565
  95% {
566
    -o-transform:translateY(-10%);
567
  }
568
  97% {
569
    -o-transform:translateY(0%);
570
    padding-bottom: 9px;
571
  }
572
  99% {
573
    -o-transform:translateY(-5%);
574
  }
575
  100% {
576
    -o-transform:translateY(0);
577
    padding-bottom: 9px;
578
    opacity: 1;
579
  }
580
}
581
 
582
/* W3, Opera 12+, Firefox 16+ */
583
@keyframes bounce {
584
  0% {
585
  transform:translateY(-100%);
586
    opacity: 0;
587
  }
588
  5% {
589
    transform:translateY(-100%);
590
    opacity: 0;
591
  }
592
  15% {
593
    transform:translateY(0);
594
    padding-bottom: 5px;
595
  }
596
  30% {
597
    transform:translateY(-50%);
598
  }
599
  40% {
600
    transform:translateY(0%);
601
    padding-bottom: 6px;
602
  }
603
  50% {
604
    transform:translateY(-30%);
605
  }
606
  70% {
607
    transform:translateY(0%);
608
    padding-bottom: 7px;
609
  }
610
  80% {
611
    transform:translateY(-15%);
612
  }
613
  90% {
614
    transform:translateY(0%);
615
    padding-bottom: 8px;
616
  }
617
  95% {
618
    transform:translateY(-7%);
619
  }
620
  97% {
621
    transform:translateY(0%);
622
    padding-bottom: 9px;
623
  }
624
  99% {
625
    transform:translateY(-3%);
626
  }
627
  100% {
628
    transform:translateY(0);
629
    padding-bottom: 9px;
630
    opacity: 1;
631
  }
632
}
 

Bounce Icon IE - unsupported browser

CSSDeck G+