Ajax Loader
×
HTML
<!DOCTYPE HTML>
1
<!DOCTYPE HTML>
2
<html>
3
    <head>
4
        <title id="main_title">pure CSS precious</title>
5
 
6
        
7
        <meta http-equiv="Content-Language" content="en" />
8
    </head>
9
 
10
    <body>
11
 
12
        <div id="precious_holder">
13
            <div id="orange">
14
                <div id="one"></div>
15
                <div id="two"></div>
16
                <div id="three"></div>
17
                <div id="four"></div>
18
            </div>
19
             <div id="green"></div>
20
             <div id="yellow">
21
                 <div id="one"></div>
22
                 <div id="two"></div>
23
             </div>
24
          
25
            <div id="base">
26
              
27
              <div id="left">
28
              </div>
29
              
30
              <div id="right">
31
                
32
              </div>
33
          
34
            </div>
35
 
36
            <div id="one" class="ink"></div>
37
            <div id="two" class="ink"></div>
38
            <div id="three" class="ink"></div>
39
            <div id="four" class="ink"></div>
40
 
41
        </div>
42
 
43
        <div id="lego" ><a href="http://legomushroom.com" title="Lego Mushroom">lego m</a></div>
44
 
45
    </body>
46
</html>
 
CSS
 
1
 
2
#precious_holder {
3
  width: 92px;
4
  height: 92px;
5
  margin: 5em auto;
6
  cursor: pointer;
7
  position: relative;
8
  
9
  /* anti-flickering pattern*/
10
  -webkit-backface-visibility: hidden;
11
  -moz-backface-visibility: hidden;
12
  -ms-backface-visibility: hidden;
13
  backface-visibility: hidden;
14
  -webkit-perspective: 1000;
15
  -moz-perspective: 1000;
16
  -ms-perspective: 1000;
17
  perspective: 1000;
18
  /* anti-flickering pattern*/
19
}
20
 
21
#precious_holder div.ink#one,
22
#precious_holder div.ink#two,
23
#precious_holder div.ink#three,
24
#precious_holder div.ink#four {
25
  position: absolute;
26
  z-index: -1;
27
  left: 50%;
28
  top: 50%;
29
  width: 0px;
30
  height: 0px;
31
  transform-origin: 50% 50%;
32
  border-radius: 100%;
33
  background-color: #43c9f0; 
34
}
35
 
36
#precious_holder #two {
37
  left: 58%;
38
  top: -152%;
39
}
40
#precious_holder div:not(.ink) {
41
  border-radius: 5px;
42
}
43
#precious_holder #yellow {
44
  width: 80px;
45
  height: 50px;
46
  left: 4px;
47
  position: relative;
48
  top: -8px;
49
}
50
#precious_holder #yellow #one {
51
  background-color: #000;
52
  height: 0px;
53
  width: 5px;
54
  position: absolute;
55
  top: 2px;
56
  left: 8px;
57
  transform: rotate(-26);
58
}
59
#precious_holder #yellow #two {
60
  background-color: #000;
61
  width: 5px;
62
  position: absolute;
63
  top: 46px;
64
  left: 40px;
65
  transform: rotate(26deg);
66
}
67
#precious_holder #green {
68
  background-color: #000;
69
  width: 0px;
70
  height: 5px;
71
  position: relative;
72
  top: -5px;
73
  left: 4px;
74
}
75
#precious_holder #orange {
76
  width: 70px;
77
  left: 10px;
78
  height: 24px;
79
  position: relative;
80
}
81
#precious_holder #orange #one {
82
  background-color: #000;
83
  height: 0px;
84
  width: 5px;
85
  position: absolute;
86
  top: 2px;
87
  left: 8px;
88
  transform: rotate(0);
89
}
90
#precious_holder #orange #two {
91
  background-color: #000;
92
  height: 0px;
93
  width: 5px;
94
  position: absolute;
95
  top: 20px;
96
  left: 12px;
97
  transform: rotate(52deg);
98
}
99
#precious_holder #orange #three {
100
  background-color: #000;
101
  height: 0px;
102
  width: 5px;
103
  position: absolute;
104
  top: 2px;
105
  left: 34px;
106
  transform: rotate(-48deg);
107
}
108
#precious_holder #orange #four {
109
  background-color: #000;
110
  height: 0px;
111
  width: 5px;
112
  position: absolute;
113
  top: 18px;
114
  left: 56px;
115
  transform: rotate(26deg);
116
}
117
#precious_holder:hover div:not(.ink) {
118
  opacity: 1;
119
}
120
#precious_holder:hover div.ink#one {
121
  left: -14px;
122
  top: -14px;
123
  width: 100px;
124
  height: 100px;
125
  transition: 2s ease-out;
126
}
127
#precious_holder:hover div.ink#two {
128
  left: -10px;
129
  top: -10px;
130
  width: 100px;
131
  height: 100px;
132
  transition: 2s ease-out;
133
}
134
#precious_holder:hover div.ink#three {
135
  left: 0px;
136
  top: -15px;
137
  width: 100px;
138
  height: 100px;
139
  transition: 2s ease-out;
140
}
141
#precious_holder:hover div.ink#four {
142
  left: 0px;
143
  top: -25px;
144
  width: 100px;
145
  height: 100px;
146
  transition: 2s ease-out;
147
}
148
#precious_holder:hover #yellow #one {
149
  height: 54px;
150
  left: 30px;
151
  top: -3px;
152
  transform: rotate(-26deg);
153
  transition: all 1.2s ease-out 0.05s;
154
}
155
#precious_holder:hover #yellow #two {
156
  height: 52px;
157
  left: 49px;
158
  top: -2px;
159
  transform: rotate(26deg);
160
  transition: all 0.28s ease-out 1s;
161
}
162
#precious_holder:hover #green {
163
  width: 84px;
164
  transition: all 1s ease-in-out;
165
}
166
#precious_holder:hover #orange #one {
167
  height: 20px;
168
  left: 8px;
169
  transform: rotate(-26deg);
170
  transition: all 0.5s ease-out;
171
}
172
#precious_holder:hover #orange #two {
173
  height: 28px;
174
  left: 22px;
175
  top: -3px;
176
  transform: rotate(52deg);
177
  transition: all 0.5s ease-out 0.4s;
178
}
179
#precious_holder:hover #orange #three {
180
  height: 28px;
181
  left: 44px;
182
  top: -3px;
183
  transform: rotate(-48deg);
184
  transition: all 0.5s ease-out 0.8s;
185
}
186
#precious_holder:hover #orange #four {
187
  height: 20px;
188
  left: 58px;
189
  top: 3px;
190
  transform: rotate(26deg);
191
  transition: all 0.2s ease-out 1.2s;
192
}
193
#lego {
194
  position: absolute;
195
  z-index: 20;
196
  left: 20px;
197
  top: -4px;
198
  width: 50px;
199
  background-color: rgba(0,200,200,0.95);
200
  border-radius: 2px;
201
  box-shadow: 0 0 5px #000;
202
  padding: 6px 10px;
203
  border: 2px solid #fff;
204
  border-radius: 4px;
205
  font-size: 14px;
206
  font-family: monospace;
207
  text-align: center;
208
  box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.10), 0 0 5px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.30), 0 3px 5px rgba(0,0,0,0.20), 0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.20), 0 20px 20px rgba(0,0,0,0.15);
209
}
210
#lego a {
211
  text-shadow: 0 0 3px #888;
212
  text-decoration: none;
213
  font-size: 14px;
214
  color: #fff;
215
}
216
#debug {
217
  position: absolute;
218
  right: 0;
219
  height: 100%;
220
}
221
#debug #console {
222
  display: none;
223
  width: 140px;
224
  height: 200px;
225
  position: relative;
226
  top: 0;
227
  right: 0;
228
  padding: 10px;
229
  font-family: 'Consolas';
230
  background-color: rgba(255,255,255,0.40);
231
  border-bottom-left-radius: 5px;
232
  overflow: auto;
233
}
234
#debug #console p {
235
  font-size: 12px;
236
  margin: 10px 0;
237
  text-align: left;
238
}
239
#debug #console p.ok {
240
  color: #008000;
241
}
242
#debug #console p.warning {
243
  color: #ffa500;
244
}
245
#debug #console p.alert {
246
  color: #000;
247
}
248
#debug #notification_wrap {
249
  position: fixed;
250
  right: 14px;
251
  bottom: 10px;
252
  width: 200px;
253
  min-height: 50px;
254
  z-index: 20;
255
}
256
#debug #notification_wrap #noty {
257
  width: 100%;
258
  min-height: 40px;
259
  border: 2px solid #fff;
260
  border-radius: 5px;
261
  text-align: center;
262
  padding: 6px 10px;
263
  box-sizing: border-box;
264
  color: #fff;
265
  text-shadow: 0 0 4px rgba(0,0,0,0.80);
266
  cursor: pointer;
267
  margin: 10px;
268
  display: none;
269
  box-shadow: 0 0 10px rgba(0,0,0,0.80), inset 0 0 2px #000;
270
  transition: bottom 0.5s linear;
271
  text-shadow: 0 -1px 1px #008000;
272
  cursor: pointer;
273
  margin: 10px;
274
  display: none;
275
  box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.10), 0 0 5px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.30), 0 3px 5px rgba(0,0,0,0.20), 0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.20), 0 20px 20px rgba(0,0,0,0.15);
276
  transition: bottom 0.5s linear;
277
  padding: auto;
278
}
279
#debug #notification_wrap #noty.ok {
280
  background-color: rgba(0,200,0,0.95) !important;
281
}
282
#debug #notification_wrap #noty.alert {
283
  background-color: rgba(200,0,0,0.95) !important;
284
}
285
#debug #notification_wrap #noty.warning {
286
  background-color: rgba(0,200,200,0.95) !important;
287
}
288
@-moz-keyframes one {
289
  0% {
290
    height: 0px;
291
    left: 3px;
292
  }
293
 
294
  50% {
295
    height: 20px;
296
    left: 8px;
297
  }
298
 
299
  100% {
300
    height: 0px;
301
    left: 3px;
302
  }
303
}
304
@-webkit-keyframes one {
305
  0% {
306
    height: 0px;
307
    left: 3px;
308
  }
309
 
310
  50% {
311
    height: 20px;
312
    left: 8px;
313
  }
314
 
315
  100% {
316
    height: 0px;
317
    left: 3px;
318
  }
319
}
320
@-o-keyframes one {
321
  0% {
322
    height: 0px;
323
    left: 3px;
324
  }
325
 
326
  50% {
327
    height: 20px;
328
    left: 8px;
329
  }
330
 
331
  100% {
332
    height: 0px;
333
    left: 3px;
334
  }
335
}
336
@-ms-keyframes one {
337
  0% {
338
    height: 0px;
339
    left: 3px;
340
  }
341
 
342
  50% {
343
    height: 20px;
344
    left: 8px;
345
  }
346
 
347
  100% {
348
    height: 0px;
349
    left: 3px;
350
  }
351
}
352
@keyframes one {
353
  0% {
354
    height: 0px;
355
    left: 3px;
356
  }
357
 
358
  50% {
359
    height: 20px;
360
    left: 8px;
361
  }
362
 
363
  100% {
364
    height: 0px;
365
    left: 3px;
366
  }
367
}
368
@-moz-keyframes three {
369
  0% {
370
    height: 0px;
371
    left: 34px;
372
    top: 2px;
373
  }
374
 
375
  50% {
376
    height: 28px;
377
    left: 44px;
378
    top: -3px;
379
  }
380
 
381
  100% {
382
    height: 0px;
383
    left: 34px;
384
    top: 2px;
385
  }
386
}
387
@-webkit-keyframes three {
388
  0% {
389
    height: 0px;
390
    left: 34px;
391
    top: 2px;
392
  }
393
 
394
  50% {
395
    height: 28px;
396
    left: 44px;
397
    top: -3px;
398
  }
399
 
400
  100% {
401
    height: 0px;
402
    left: 34px;
403
    top: 2px;
404
  }
405
}
406
@-o-keyframes three {
407
  0% {
408
    height: 0px;
409
    left: 34px;
410
    top: 2px;
411
  }
412
 
413
  50% {
414
    height: 28px;
415
    left: 44px;
416
    top: -3px;
417
  }
418
 
419
  100% {
420
    height: 0px;
421
    left: 34px;
422
    top: 2px;
423
  }
424
}
425
@-ms-keyframes three {
426
  0% {
427
    height: 0px;
428
    left: 34px;
429
    top: 2px;
430
  }
431
 
432
  50% {
433
    height: 28px;
434
    left: 44px;
435
    top: -3px;
436
  }
437
 
438
  100% {
439
    height: 0px;
440
    left: 34px;
441
    top: 2px;
442
  }
443
}
444
@keyframes three {
445
  0% {
446
    height: 0px;
447
    left: 34px;
448
    top: 2px;
449
  }
450
 
451
  50% {
452
    height: 28px;
453
    left: 44px;
454
    top: -3px;
455
  }
456
 
457
  100% {
458
    height: 0px;
459
    left: 34px;
460
    top: 2px;
461
  }
462
}
463
@-moz-keyframes four {
464
  0% {
465
    top: 18px;
466
    height: 0px;
467
    left: 56px;
468
  }
469
 
470
  50% {
471
    top: 3px;
472
    height: 20px;
473
    left: 58px;
474
  }
475
 
476
  100% {
477
    top: 18px;
478
    height: 0px;
479
    left: 56px;
480
  }
481
}
482
@-webkit-keyframes four {
483
  0% {
484
    top: 18px;
485
    height: 0px;
486
    left: 56px;
487
  }
488
 
489
  50% {
490
    top: 3px;
491
    height: 20px;
492
    left: 58px;
493
  }
494
 
495
  100% {
496
    top: 18px;
497
    height: 0px;
498
    left: 56px;
499
  }
500
}
501
@-o-keyframes four {
502
  0% {
503
    top: 18px;
504
    height: 0px;
505
    left: 56px;
506
  }
507
 
508
  50% {
509
    top: 3px;
510
    height: 20px;
511
    left: 58px;
512
  }
513
 
514
  100% {
515
    top: 18px;
516
    height: 0px;
517
    left: 56px;
518
  }
519
}
520
@-ms-keyframes four {
521
  0% {
522
    top: 18px;
523
    height: 0px;
524
    left: 56px;
525
  }
526
 
527
  50% {
528
    top: 3px;
529
    height: 20px;
530
    left: 58px;
531
  }
532
 
533
  100% {
534
    top: 18px;
535
    height: 0px;
536
    left: 56px;
537
  }
538
}
539
@keyframes four {
540
  0% {
541
    top: 18px;
542
    height: 0px;
543
    left: 56px;
544
  }
545
 
546
  50% {
547
    top: 3px;
548
    height: 20px;
549
    left: 58px;
550
  }
551
 
552
  100% {
553
    top: 18px;
554
    height: 0px;
555
    left: 56px;
556
  }
557
}
558
@-moz-keyframes two {
559
  0% {
560
    top: 20px;
561
    height: 0px;
562
    left: 12px;
563
  }
564
 
565
  50% {
566
    top: -5px;
567
    height: 32px;
568
    left: 22px;
569
  }
570
 
571
  100% {
572
    top: 20px;
573
    height: 0px;
574
    left: 12px;
575
  }
576
}
577
@-webkit-keyframes two {
578
  0% {
579
    top: 20px;
580
    height: 0px;
581
    left: 12px;
582
  }
583
 
584
  50% {
585
    top: -5px;
586
    height: 32px;
587
    left: 22px;
588
  }
589
 
590
  100% {
591
    top: 20px;
592
    height: 0px;
593
    left: 12px;
594
  }
595
}
596
@-o-keyframes two {
597
  0% {
598
    top: 20px;
599
    height: 0px;
600
    left: 12px;
601
  }
602
 
603
  50% {
604
    top: -5px;
605
    height: 32px;
606
    left: 22px;
607
  }
608
 
609
  100% {
610
    top: 20px;
611
    height: 0px;
612
    left: 12px;
613
  }
614
}
615
@-ms-keyframes two {
616
  0% {
617
    top: 20px;
618
    height: 0px;
619
    left: 12px;
620
  }
621
 
622
  50% {
623
    top: -5px;
624
    height: 32px;
625
    left: 22px;
626
  }
627
 
628
  100% {
629
    top: 20px;
630
    height: 0px;
631
    left: 12px;
632
  }
633
}
634
@keyframes two {
635
  0% {
636
    top: 20px;
637
    height: 0px;
638
    left: 12px;
639
  }
640
 
641
  50% {
642
    top: -5px;
643
    height: 32px;
644
    left: 22px;
645
  }
646
 
647
  100% {
648
    top: 20px;
649
    height: 0px;
650
    left: 12px;
651
  }
652
}
653
 
654
#base #left{
655
  height:72px;
656
  width:6px;
657
  background-color:black;
658
  transform: rotate(-41deg);
659
  position:absolute;
660
  top:10px;
661
  left:21px
662
}
663
 
664
#base #left:after{
665
  content:'';
666
  height:25px;
667
  width:6px;
668
  background-color:black;
669
  transform: rotate(70deg);
670
  position:absolute;
671
  top:-14px;
672
  left:10px 
673
}
674
 
675
#base #left:before{
676
  content:'';
677
  height:67px;
678
  width:6px;
679
  background-color:black;
680
  transform: rotate(131deg);
681
  position:absolute;
682
  top:-18px;
683
  left:44px 
684
}
685
 
686
 
687
#base #right{
688
  height:72px;
689
  width:6px;
690
  background-color:black;
691
  transform: rotate(41deg);
692
  position:absolute;
693
  top:10px;
694
  left:65px
695
}
696
 
697
#base #right:after{
698
  content:'';
699
  height:25px;
700
  width:6px;
701
  background-color:black;
702
  transform: rotate(-76deg);
703
  position:absolute;
704
  top:-13px;
705
  left:-12px 
706
}
707
 
 

Precious hover in pure CSS

CSSDeck G+