Ajax Loader
HTML 
<a href="http://demo.opendix.at/">
1
<a href="http://demo.opendix.at/">
2
  <div id="logo_container">
3
    <div id="opendix_container">
4
      <p>
5
        <span id="opendix_o">o</span>
6
        <span id="opendix_p">p</span>
7
        <span id="opendix_e">e</span>
8
        <span id="opendix_n">n</span>
9
        <span id="opendix_d">d</span>
10
        <span id="opendix_i">i</span>
11
        <span id="opendix_x">x</span>
12
      </p>
13
    </div>
14
15
    <div id="x_container">
16
      <!-- START FIRST ROW SQUARES -->
17
      <div class="x_1"></div><div class="x_2"></div><div class="x_3"></div><div class="x_4"></div><div class="x_5"></div><div class="x_6"></div><div class="x_7"></div><div class="x_8"></div>
18
      <!-- END FIRST ROW SUQARES -->
19
 
20
      <!-- START SECOND ROW SQUARES -->
21
      <div class="x_9"></div><div class="x_10"></div><div class="x_11"></div><div class="x_12"></div><div class="x_13"></div><div class="x_14"></div><div class="x_15"></div><div class="x_16"></div>
22
      <!-- END SECOND ROW SQUARES -->
23
 
24
      <!-- START THIRD ROW SQUARES -->
25
      <div class="x_17"></div><div class="x_18"></div><div class="x_19"></div><div class="x_20"></div><div class="x_21"></div><div class="x_22"></div><div class="x_23"></div><div class="x_24"></div>
26
      <!-- END THIRED ROW SQUARES -->
27
 
28
      <!-- START FOURTH ROW SQUARES -->
29
      <div class="x_25"></div><div class="x_26"></div><div class="x_27"></div><div class="x_28"></div><div class="x_29"></div><div class="x_30"></div><div class="x_31"></div><div class="x_32"></div>
30
      <!-- END FOURTH ROW SQUARES -->
31
 
32
      <!-- START FIFTH ROW SQUARES -->
33
      <div class="x_33"></div><div class="x_34"></div><div class="x_35"></div><div class="x_36"></div><div class="x_37"></div><div class="x_38"></div>
34
      <!-- END FIFTH ROW SQUARES -->
35
 
36
      <!-- START SIXTH ROW SQUARES -->
37
      <div class="x_39"></div><div class="x_40"></div><div class="x_41"></div><div class="x_42"></div>
38
      <!-- END SIXTH ROW SQUARES -->
39
 
40
      <!-- START SEVENTH ROW SQUARES -->
41
      <div class="x_43"></div><div class="x_44"></div><div class="x_45"></div><div class="x_46"></div>
42
      <!-- END SEVENTH ROW SQUARES -->
43
 
44
      <!-- START EIGHTH ROW SQUARES -->
45
      <div class="x_47"></div><div class="x_48"></div><div class="x_49"></div><div class="x_50"></div><div class="x_51"></div><div class="x_52"></div>
46
      <!-- END EIGHTH ROW SQUARES -->
47
 
48
      <!-- START NINTH ROW SQUARES -->
49
      <div class="x_53"></div><div class="x_54"></div><div class="x_55"></div><div class="x_56"></div><div class="x_57"></div><div class="x_58"></div><div class="x_59"></div><div class="x_60"></div>
50
      <!-- END NINTH ROW SQUARES -->
51
52
      <!-- START TENTH ROW SQUQARES -->
53
      <div class="x_61"></div><div class="x_62"></div><div class="x_63"></div><div class="x_64"></div><div class="x_65"></div><div class="x_66"></div><div class="x_67"></div><div class="x_68"></div>
54
      <!-- END TENTH ROW SQUARES -->
55
56
      <!-- START ELEVENTH ROW SQUARES -->
57
      <div class="x_69"></div><div class="x_70"></div><div class="x_71"></div><div class="x_72"></div><div class="x_73"></div><div class="x_74"></div><div class="x_75"></div><div class="x_76"></div>
58
      <!-- END ELEVENTH ROW SQUARES -->
59
    </div>
60
  </div>
61
</a>
 
CSS 
/*********************************************************************** BODY */
1
/*********************************************************************** BODY */
2
body {
3
  background-color:           #222222;
4
  position:               relative;
5
  overflow:               hidden;
6
}
7
@font-face {
8
  font-family:              'Vegur-L';
9
  src:                  url('http://opendix.at/media/fonts/Vegur-L.otf');
10
  local('Vegur-L');
11
}
12
 
13
.font_vegur_l {
14
  font-family:              'Vegur-L';
15
  font-weight:              normal;
16
  font-style:               normal;
17
  line-height:              normal;
18
  font-size:                16px;
19
}
20
 
21
/*********************************************************************** LOGO */
22
#logo_container {
23
  position:               absolute;
24
  width:                  500px;
25
  height:                 110px;
26
  left:                 50%;
27
  top:                  0;
28
  margin-top:               52px;
29
  margin-left:              -250px;
30
}
31
 
32
/******************************************************************** OPENDIX */
33
#opendix_container {
34
  position:               absolute;
35
  width:                  390px;
36
  height:                 110px;
37
  left:                 0px;
38
  top:                  50px;
39
  margin-top:               -52px;
40
}
41
#opendix_container p {
42
  display:                block;
43
  position:               absolute;
44
  top:                  0px;
45
  left:                 0px;
46
47
  font-family:              'Vegur-L', Tahoma;
48
  font-size:                120px;
49
  letter-spacing:             -10px;
50
  color:                  #FFFFFF;
51
}
52
 
53
#opendix_o {
54
  position:               absolute;
55
  top:                  -132px;
56
  left:                 0px;
57
58
  -webkit-animation:            opendix_slidein 3000ms;
59
  -moz-animation:             opendix_slidein 3000ms;
60
  -o-animation:             opendix_slidein 3000ms;
61
  animation:                opendix_slidein 3000ms;
62
}
63
#opendix_p {
64
  position:               absolute;
65
  top:                  -132px;
66
  left:                 70px;
67
68
  -webkit-animation:            opendix_slidein 2500ms;
69
  -moz-animation:             opendix_slidein 2500ms;
70
  -o-animation:             opendix_slidein 2500ms;
71
  animation:                opendix_slidein 2500ms;
72
}
73
#opendix_e {
74
  position:               absolute;
75
  top:                  -132px;
76
  left:                 140px;
77
78
  -webkit-animation:            opendix_slidein 2000ms;
79
  -moz-animation:             opendix_slidein 2000ms;
80
  -o-animation:             opendix_slidein 2000ms;
81
  animation:                opendix_slidein 2000ms;
82
}
83
#opendix_n {
84
  position:               absolute;
85
  top:                  -132px;
86
  left:                 210px;
87
88
  -webkit-animation:            opendix_slidein 1500ms;
89
  -moz-animation:             opendix_slidein 1500ms;
90
  -o-animation:             opendix_slidein 1500ms;
91
  animation:                opendix_slidein 1500ms;
92
}
93
#opendix_d {
94
  position:               absolute;
95
  top:                  -132px;
96
  left:                 280px;
97
98
  -webkit-animation:            opendix_slidein 1000ms;
99
  -moz-animation:             opendix_slidein 1000ms;
100
  -o-animation:             opendix_slidein 1000ms;
101
  animation:                opendix_slidein 1000ms;
102
}
103
#opendix_i {
104
  position:               absolute;
105
  top:                  -132px;
106
  left:                 350px;
107
108
  -webkit-animation:            opendix_slidein 500ms;
109
  -moz-animation:             opendix_slidein 500ms;
110
  -o-animation:             opendix_slidein 500ms;
111
  animation:                opendix_slidein 500ms;
112
}
113
#opendix_x {
114
  display:                none;
115
}
116
 
117
/********************************************************************** THE X */
118
#x_container {
119
  width:                  110px;
120
  height:                 82px;
121
  position:               absolute;
122
  right:                  0px;
123
  bottom:                 10px;
124
}
125
#x_container div {
126
  width:                  6px;
127
  height:                 6px;
128
  position:               absolute;
129
}
130
 
131
/* FIRST ROW SQUARES */
132
#x_container .x_1 {
133
  left:                 0px;
134
  bottom:                 0px;
135
  background-color:           #E45C4B;
136
}
137
#x_container .x_2 {
138
  left:                 8px;
139
  bottom:                 0px;
140
  background-color:           #E24435;
141
}
142
#x_container .x_3 {
143
  left:                 16px;
144
  bottom:                 0px;
145
  background-color:           #EC897D;
146
}
147
#x_container .x_4 {
148
  left:                 24px;
149
  bottom:                 0px;
150
  background-color:           #DF251F;
151
152
  -webkit-animation:            x_flight_l 2500ms;
153
  -moz-animation:             x_flight_l 2500ms;
154
  -o-animation:             x_flight_l 2500ms;
155
  animation:                x_flight_l 2500ms;
156
}
157
#x_container .x_5 {
158
  right:                  24px;
159
  bottom:                 0px;
160
  background-color:           #E45C4B;
161
}
162
#x_container .x_6 {
163
  right:                  16px;
164
  bottom:                 0px;
165
  background-color:           #E24435;
166
}
167
#x_container .x_7 {
168
  right:                  8px;
169
  bottom:                 0px;
170
  background-color:           #DB091A;
171
}
172
#x_container .x_8 {
173
  right:                  0px;
174
  bottom:                 0px;
175
  background-color:           #EC897D;
176
}
177
 
178
/* SECOND ROW SQUARES */
179
#x_container .x_9 {
180
  left:                 8px;
181
  bottom:                 8px;
182
  background-color:           #EC897D;
183
}
184
#x_container .x_10 {
185
  left:                 16px;
186
  bottom:                 8px;
187
  background-color:           #E45C4B;
188
}
189
#x_container .x_11 {
190
  left:                 24px;
191
  bottom:                 8px;
192
  background-color:           #DB091A;
193
}
194
#x_container .x_12 {
195
  left:                 32px;
196
  bottom:                 8px;
197
  background-color:           #EC897D;
198
}
199
#x_container .x_13 {
200
  right:                  32px;
201
  bottom:                 8px;
202
  background-color:           #EC897D;
203
}
204
#x_container .x_14 {
205
  right:                  24px;
206
  bottom:                 8px;
207
  background-color:           #DB091A;
208
}
209
#x_container .x_15 {
210
  right:                  16px;
211
  bottom:                 8px;
212
  background-color:           #DB091A;
213
}
214
#x_container .x_16 {
215
  right:                  8px;
216
  bottom:                 8px;
217
  background-color:           #E45C4B;
218
}
219
 
220
/* THIRD ROW SQUARES */
221
#x_container .x_17 {
222
  left:                 16px;
223
  bottom:                 16px;
224
  background-color:           #DB091A;
225
}
226
#x_container .x_18 {
227
  left:                 24px;
228
  bottom:                 16px;
229
  background-color:           #DB091A;
230
}
231
#x_container .x_19 {
232
  left:                 32px;
233
  bottom:                 16px;
234
  background-color:           #DB091A;
235
}
236
#x_container .x_20 {
237
  left:                 40px;
238
  bottom:                 16px;
239
  background-color:           #DB091A;
240
}
241
#x_container .x_21 {
242
  right:                  40px;
243
  bottom:                 16px;
244
  background-color:           #DB091A;
245
}
246
#x_container .x_22 {
247
  right:                  32px;
248
  bottom:                 16px;
249
  background-color:           #DB091A;
250
}
251
#x_container .x_23 {
252
  right:                  24px;
253
  bottom:                 16px;
254
  background-color:           #DB091A;
255
}
256
#x_container .x_24 {
257
  right:                  16px;
258
  bottom:                 16px;
259
  background-color:           #DF251F;
260
 
261
  -webkit-animation:            x_flight_r 2000ms;
262
  -moz-animation:             x_flight_r 2000ms;
263
  -o-animation:             x_flight_r 2000ms;
264
  animation:                x_flight_r 2000ms;
265
}
266
 
267
/* FOURTH ROW SQUARES */
268
#x_container .x_25 {
269
  left:                 24px;
270
  bottom:                 24px;
271
  background-color:           #E24435;
272
}
273
#x_container .x_26 {
274
  left:                 32px;
275
  bottom:                 24px;
276
  background-color:           #DB091A;
277
}
278
#x_container .x_27 {
279
  left:                 40px;
280
  bottom:                 24px;
281
  background-color:           #DB091A;
282
}
283
#x_container .x_28 {
284
  left:                 48px;
285
  bottom:                 24px;
286
  background-color:           #DB091A;
287
}
288
#x_container .x_29 {
289
  right:                  48px;
290
  bottom:                 24px;
291
  background-color:           #E45C4B;
292
}
293
#x_container .x_30 {
294
  right:                  40px;
295
  bottom:                 24px;
296
  background-color:           #DB091A;
297
}
298
#x_container .x_31 {
299
  right:                  32px;
300
  bottom:                 24px;
301
  background-color:           #DB091A;
302
}
303
#x_container .x_32 {
304
  right:                  24px;
305
  bottom:                 24px;
306
  background-color:           #DF251F;
307
}
308
 
309
/* FIFTH ROW SQUARES */
310
#x_container .x_33 {
311
  left:                 32px;
312
  bottom:                 32px;
313
  background-color:           #E97365;
314
 
315
  -webkit-animation:            x_flight_l 2200ms;
316
  -moz-animation:             x_flight_l 2200ms;
317
  -o-animation:             x_flight_l 2200ms;
318
  animation:                x_flight_l 2200ms;
319
}
320
#x_container .x_34 {
321
  left:                 40px;
322
  bottom:                 32px;
323
  background-color:           #DB091A;
324
}
325
#x_container .x_35 {
326
  left:                 48px;
327
  bottom:                 32px;
328
  background-color:           #DB091A;
329
}
330
#x_container .x_36 {
331
  right:                  48px;
332
  bottom:                 32px;
333
  background-color:           #DB091A;
334
}
335
#x_container .x_37 {
336
  right:                  40px;
337
  bottom:                 32px;
338
  background-color:           #DB091A;
339
}
340
#x_container .x_38 {
341
  right:                  32px;
342
  bottom:                 32px;
343
  background-color:           #EC897D;
344
}
345
 
346
/* SIXTH ROW SQUARES */
347
#x_container .x_39 {
348
  left:                 40px;
349
  bottom:                 40px;
350
  background-color:           #DB091A;
351
}
352
#x_container .x_40 {
353
  left:                 48px;
354
  bottom:                 40px;
355
  background-color:           #DB091A;
356
}
357
#x_container .x_41 {
358
  right:                  48px;
359
  bottom:                 40px;
360
  background-color:           #DB091A;
361
362
  -webkit-animation:            x_flight_r 1500ms;
363
  -moz-animation:             x_flight_r 1500ms;
364
  -o-animation:             x_flight_r 1500ms;
365
  animation:                x_flight_r 1500ms;
366
}
367
#x_container .x_42 {
368
  right:                  40px;
369
  bottom:                 40px;
370
  background-color:           #E45C4B;
371
}
372
 
373
/* SEVENTH ROW SQUARES */
374
#x_container .x_43 {
375
  left:                 40px;
376
  bottom:                 48px;
377
  background-color:           #E45C4B;
378
}
379
#x_container .x_44 {
380
  left:                 48px;
381
  bottom:                 48px;
382
  background-color:           #DB091A;
383
}
384
#x_container .x_45 {
385
  right:                  48px;
386
  bottom:                 48px;
387
  background-color:           #DB091A;
388
}
389
#x_container .x_46 {
390
  right:                  40px;
391
  bottom:                 48px;
392
  background-color:           #DF251F;
393
}
394
 
395
/* EIGHTH ROW SQUARES */
396
#x_container .x_47 {
397
  left:                 32px;
398
  bottom:                 56px;
399
  background-color:           #EC897D;
400
}
401
#x_container .x_48 {
402
  left:                 40px;
403
  bottom:                 56px;
404
  background-color:           #DB091A;
405
}
406
#x_container .x_49 {
407
  left:                 48px;
408
  bottom:                 56px;
409
  background-color:           #DB091A;
410
}
411
#x_container .x_50 {
412
  right:                  48px;
413
  bottom:                 56px;
414
  background-color:           #DB091A;
415
}
416
#x_container .x_51 {
417
  right:                  40px;
418
  bottom:                 56px;
419
  background-color:           #DB091A;
420
 
421
  -webkit-animation:            x_flight_r 2500ms;
422
  -moz-animation:             x_flight_r 2500ms;
423
  -o-animation:             x_flight_r 2500ms;
424
  animation:                x_flight_r 2500ms;
425
}
426
#x_container .x_52 {
427
  right:                  32px;
428
  bottom:                 56px;
429
  background-color:           #DB091A;
430
}
431
 
432
/* NINTH ROW SQUARES */
433
#x_container .x_53 {
434
  left:                 24px;
435
  bottom:                 64px;
436
  background-color:           #DB091A;
437
}
438
#x_container .x_54 {
439
  left:                 32px;
440
  bottom:                 64px;
441
  background-color:           #DB091A;
442
}
443
#x_container .x_55 {
444
  left:                 40px;
445
  bottom:                 64px;
446
  background-color:           #DB091A;
447
 
448
  -webkit-animation:            x_flight_l 2800ms;
449
  -moz-animation:             x_flight_l 2800ms;
450
  -o-animation:             x_flight_l 2800ms;
451
  animation:                x_flight_l 2800ms;
452
}
453
#x_container .x_56 {
454
  left:                 48px;
455
  bottom:                 64px;
456
  background-color:           #DB091A;
457
}
458
#x_container .x_57 {
459
  right:                  48px;
460
  bottom:                 64px;
461
  background-color:           #E97365;
462
}
463
#x_container .x_58 {
464
  right:                  40px;
465
  bottom:                 64px;
466
  background-color:           #DB091A;
467
}
468
#x_container .x_59 {
469
  right:                  32px;
470
  bottom:                 64px;
471
  background-color:           #DB091A;
472
}
473
#x_container .x_60 {
474
  right:                  24px;
475
  bottom:                 64px;
476
  background-color:           #EC897D;
477
}
478
 
479
/* TENTH ROW SQUARES */
480
#x_container .x_61 {
481
  left:                 16px;
482
  bottom:                 72px;
483
  background-color:           #E97365;
484
}
485
#x_container .x_62 {
486
  left:                 24px;
487
  bottom:                 72px;
488
  background-color:           #DB091A;
489
}
490
#x_container .x_63 {
491
  left:                 32px;
492
  bottom:                 72px;
493
  background-color:           #DB091A;
494
}
495
#x_container .x_64 {
496
  left:                 40px;
497
  bottom:                 72px;
498
  background-color:           #E45C4B;
499
}
500
#x_container .x_65 {
501
  right:                  40px;
502
  bottom:                 72px;
503
  background-color:           #E45C4B;
504
}
505
#x_container .x_66 {
506
  right:                  32px;
507
  bottom:                 72px;
508
  background-color:           #DB091A;
509
}
510
#x_container .x_67 {
511
  right:                  24px;
512
  bottom:                 72px;
513
  background-color:           #EC897D;
514
}
515
#x_container .x_68 {
516
  right:                  16px;
517
  bottom:                 72px;
518
  background-color:           #E45C4B;
519
}
520
 
521
/* ELEVENTH ROW SQUARES */
522
#x_container .x_69 {
523
  left:                 8px;
524
  bottom:                 80px;
525
  background-color:           #EC897D;
526
}
527
#x_container .x_70 {
528
  left:                 16px;
529
  bottom:                 80px;
530
  background-color:           #E45C4B;
531
}
532
#x_container .x_71 {
533
  left:                 24px;
534
  bottom:                 80px;
535
  background-color:           #E24435;
536
}
537
#x_container .x_72 {
538
  left:                 32px;
539
  bottom:                 80px;
540
  background-color:           #DB091A;
541
}
542
#x_container .x_73 {
543
  right:                  32px;
544
  bottom:                 80px;
545
  background-color:           #DF251F;
546
}
547
#x_container .x_74 {
548
  right:                  24px;
549
  bottom:                 80px;
550
  background-color:           #E45C4B;
551
552
  -webkit-animation:            x_flight_r 1000ms;
553
  -moz-animation:             x_flight_r 1000ms;
554
  -o-animation:             x_flight_r 1000ms;
555
  animation:                x_flight_r 1000ms;
556
}
557
#x_container .x_75 {
558
  right:                  16px;
559
  bottom:                 80px;
560
  background-color:           #E24435;
561
}
562
#x_container .x_76 {
563
  right:                  8px;
564
  bottom:                 80px;
565
  background-color:           #EC897D;
566
}
567
 
568
/*********************************************************** OPENDIX SLIDE IN */
569
@-webkit-keyframes opendix_slidein {
570
  0%                    { opacity: 0.0; left: -2000px; }
571
  100%                  { opacity: 1.0; }
572
}
573
@-moz-keyframes opendix_slidein {
574
  0%                    { opacity: 0.0; left: -2000px; }
575
  100%                  { opacity: 1.0; }
576
}
577
@-o-keyframes opendix_slidein {
578
  0%                    { opacity: 0.0; left: -2000px; }
579
  100%                  { opacity: 1.0; }
580
}
581
@keyframes opendix_slidein {
582
  0%                    { opacity: 0.0; left: -2000px; }
583
  100%                  { opacity: 1.0; }
584
}
585
 
586
/**************************************************************** X_MOUSEOVER */
587
@-webkit-keyframes x_mouseover {
588
  0%                    { opacity: 0.0; }
589
  50%                   { opacity: 0.5; }
590
  100%                  { opacity: 1.0; }
591
}
592
@-moz-keyframes x_mouseover {
593
  0%                    { opacity: 0.0; }
594
  50%                   { opacity: 0.5; }
595
  100%                  { opacity: 1.0; }
596
}
597
@-o-keyframes x_mouseover {
598
  0%                    { opacity: 0.0; }
599
  50%                   { opacity: 0.5; }
600
  100%                  { opacity: 1.0; }
601
}
602
@keyframes x_mouseover {
603
  0%                    { opacity: 0.0; }
604
  50%                   { opacity: 0.5; }
605
  100%                  { opacity: 1.0; }
606
}
607
 
608
/****************************************************************** X_FLIGHTS */
609
/* X_FLIGHT_L */
610
@-webkit-keyframes x_flight_l {
611
  0%                    { padding: 3000px; left: -1000px; bottom: -1000px; opacity: 0.0; }
612
  50%                   { opacity: 0.3; }
613
  100%                  { padding: 0px; opacity: 1.0; }
614
}
615
@-moz-keyframes x_flight_l {
616
  0%                    { padding: 3000px; left: -1000px; bottom: -1000px; opacity: 0.0; }
617
  50%                   { opacity: 0.3; }
618
  100%                  { padding: 0px; opacity: 1.0; }
619
}
620
@-o-keyframes x_flight_l {
621
  0%                    { padding: 3000px; left: -1000px; bottom: -1000px; opacity: 0.0; }
622
  50%                   { opacity: 0.3; }
623
  100%                  { padding: 0px; opacity: 1.0; }
624
}
625
@keyframes x_flight_l {
626
  0%                    { padding: 3000px; left: -1000px; bottom: -1000px; opacity: 0.0; }
627
  50%                   { opacity: 0.3; }
628
  100%                  { padding: 0px; opacity: 1.0; }
629
}
630
 
631
/* X_FLIGHT_R */
632
@-webkit-keyframes x_flight_r {
633
  0%                    { padding: 3000px; right: -1000px; bottom: -1000px; opacity: 0.0; }
634
  50%                   { opacity: 0.3; }
635
  100%                  { padding: 0px; opacity: 1.0; }
636
}
637
@-moz-keyframes x_flight_r {
638
  0%                    { padding: 3000px; left: -1000px; bottom: -1000px; opacity: 0.0; }
639
  50%                   { opacity: 0.3; }
640
  100%                  { padding: 0px; opacity: 1.0; }
641
}
642
@-o-keyframes x_flight_r {
643
  0%                    { padding: 3000px; left: -1000px; bottom: -1000px; opacity: 0.0; }
644
  50%                   { opacity: 0.3; }
645
  100%                  { padding: 0px; opacity: 1.0; }
646
}
647
@keyframes x_flight_r {
648
  0%                    { padding: 3000px; left: -1000px; bottom: -1000px; opacity: 0.0; }
649
  50%                   { opacity: 0.3; }
650
  100%                  { padding: 0px; opacity: 1.0; }
651
}
 

CSS3 animated company logo

CSSDeck G+