Ajax Loader
HTML
<div id="body" class="clearfix">
1
<div id="body" class="clearfix">
2
 
3
  <div class="fly-menu">
4
    <div class="fly-hover"></div>
5
    <ul>
6
    <li class="fly-item home"></li>
7
    <li class="fly-item about"></li>
8
    <li class="fly-item setting"></li>
9
    <li class="fly-item portfolio"></li>
10
    <li class="fly-item mail"></li>
11
</ul>
12
    <div class="fly-main"></div>
13
  </div>
14
</div>
 
CSS
 
1
 
2
 
3
 
4
 
5
#body {
6
    padding: 100px 0 150px 0;
7
}
8
 
9
 
10
.fly-menu {
11
  float: left;
12
  margin: 50px 100px 0 150px;
13
  width: 60px;
14
  height: 60px;
15
  position: relative;
16
  border-radius: 50%;
17
  z-index: 1;
18
  display: block;
19
}
20
 
21
.fly-main {
22
  width: 60px;
23
  height: 60px;
24
  background: red;
25
  position: relative;
26
  border-radius: 100%;
27
  border: 2px solid #fff;
28
  -moz-transition: 1.5s ease;
29
  -webkit-transition: 1.5s ease;
30
  transition: 1.5s ease;
31
  position:absolute;
32
  cursor:pointer;
33
}
34
.fly-main:after{
35
    content:"";
36
    position:absolute;
37
    background:white;
38
    width:10px;
39
    height:30px;
40
    top:15px;
41
    left:25px;
42
 
43
}
44
.fly-main:before{
45
    content:"";
46
    position:absolute;
47
    background:white;
48
    width:30px;
49
    height:10px;
50
    top:25px;
51
    left:15px;
52
 
53
}
54
 
55
.fly-menu:hover .fly-main {
56
  -moz-transform: rotate(490deg);
57
  -webkit-transform: rotate(490deg);
58
  transform: rotate(490deg);
59
}
60
 
61
 
62
 
63
 
64
.fly-hover {
65
  width: 60px;
66
  height: 60px;
67
  opacity: 0.5;
68
  border-radius: 100%;
69
  position: absolute;
70
  top: 0;
71
  left: 0;
72
  -moz-transition: 0.3s ease;
73
  -webkit-transition: 0.3s ease;
74
  transition: 0.3s ease;
75
}
76
 
77
.fly-menu:hover .fly-hover {
78
  -moz-transform: scale(5);
79
  -webkit-transform: scale(5);
80
  transform: scale(5);
81
}
82
 
83
ul{
84
  list-style:none;
85
}
86
 
87
.fly-item {
88
  position: absolute;
89
  width: 30px;
90
  height: 30px;
91
  border: 2px solid #fff;
92
  -moz-border-radius: 100%;
93
  -webkit-border-radius: 100%;
94
  border-radius: 100%;
95
}
96
 
97
.home,
98
.about,
99
.setting,
100
.portfolio,
101
.mail{
102
 
103
  -moz-transition-duration: 0.3s;
104
  -webkit-transition-duration: 0.3s;
105
  transition-duration: 0.3s;
106
  -moz-transition-timing-function: linear;
107
  -webkit-transition-timing-function: linear;
108
  transition-timing-function: linear;
109
}
110
 
111
 
112
 
113
.home {
114
  background-color: #D4F25C;
115
 width:50px;
116
  height:50px;
117
  top: 15px;
118
  left: 15px;
119
  -moz-transform: rotate(-360deg);
120
  -webkit-transform: rotate(-360deg);
121
  transform: rotate(-360deg);
122
  -moz-transition-delay: 0.2s;
123
  -webkit-transition-delay: 0.2s;
124
  transition-delay: 0.2s;
125
  cursor:pointer;
126
}
127
.home:after{
128
content: "";
129
    border-color: transparent transparent #577305;
130
    border-image: none;
131
    border-style: solid;
132
    border-width: 18px;
133
    content: "";
134
    height: 16px;
135
    left: 7px;
136
    position: absolute;
137
    top: -30px;
138
    width: 0;
139
   display:inline-block;
140
}
141
.home:before{
142
width:30px;
143
 height:20px;
144
  content:"";
145
  background-color:#577305;
146
  position:absolute;
147
  top:20px;
148
  left:10px;
149
   display:inline-block;
150
}
151
 
152
.fly-menu:hover .home {
153
  top: -60px;
154
  left: -60px;
155
  -moz-transform: rotate(360deg);
156
  -webkit-transform: rotate(360deg);
157
  transform: rotate(360deg);
158
  -moz-animation: home 1s 1 linear;
159
  -webkit-animation: home 1s 1 linear;
160
  animation: home 1s 1 linear;
161
}
162
 
163
@-moz-keyframes home {
164
  0% {-moz-transform: rotate(-360deg); top: 15px; left: 15px;}
165
  50% {-moz-transform: rotate(0deg); top: -70px; left: -70px;}
166
  100% {-moz-transform: rotate(360deg); top: -60px; left: -60px;}
167
}
168
 
169
@-webkit-keyframes home {
170
  0% {-webkit-transform: rotate(-360deg); top: 15px; left: 15px;}
171
  50% {-webkit-transform: rotate(0deg); top: -70px; left: -70px;}
172
  100% {-webkit-transform: rotate(360deg) top: -60px; left: -60px;;}
173
}
174
 
175
@keyframes home {
176
  0% {transform: rotate(-360deg); top: 15px; left: 15px;}
177
  50% {transform: rotate(0deg); top: -70px; left: -70px;}
178
  100% {transform: rotate(360deg); top: -60px; left: -60px;}
179
}
180
 
181
 
182
 
183
 
184
.about {
185
  background-color: #02BDF4;
186
 width:50px;
187
  height:50px;
188
  top: 15px;
189
  left: 15px;
190
  -moz-transform: rotate(-360deg);
191
  -webkit-transform: rotate(-360deg);
192
  transform: rotate(-360deg);
193
  -moz-transition-delay: 0.3s;
194
  -webkit-transition-delay: 0.3s;
195
  transition-delay: 0.3s;
196
  cursor:pointer;
197
}
198
.about:after{
199
content:"";
200
  width:10px;
201
  height:10px;
202
  border-radius:10px;
203
  position:absolute;
204
  top:10px;
205
  left:20px;
206
  background-color:#21383E;
207
  display:inline-block;
208
 
209
}
210
.about:before{
211
content:"";
212
  width:10px;
213
  height:20px;
214
  position:absolute;
215
  top:22px;
216
  left:20px;
217
  background-color:#21383E;
218
   display:inline-block;
219
}
220
 
221
.fly-menu:hover .about {
222
  top: -120px;
223
  left:50px;
224
  -moz-transform: rotate(360deg);
225
  -webkit-transform: rotate(360deg);
226
  transform: rotate(360deg);
227
  -moz-animation: it-2 1.1s 1 linear;
228
  -webkit-animation: it-2 1.1s 1 linear;
229
  animation: it-2 1.1s 1 linear;
230
}
231
 
232
@-moz-keyframes about {
233
  0% {-moz-transform: rotate(-360deg); top: 15px;}
234
  50% {-moz-transform: rotate(0deg); top: -110px;}
235
  100% {-moz-transform: rotate(360deg); top:-100px;}
236
}
237
 
238
@-webkit-keyframes about {
239
  0% {-webkit-transform: rotate(-360deg); top: 15px;}
240
  50% {-webkit-transform: rotate(0deg); top: -110px;}
241
  100% {-webkit-transform: rotate(360deg); top:-100px;}
242
}
243
 
244
@keyframes about {
245
  0% {transform: rotate(-360deg); top: 15px;}
246
  50% {transform: rotate(0deg); top: -110px;}
247
  100% {transform: rotate(360deg); top:-100px;}
248
}
249
 
250
 
251
 
252
.setting {
253
  background: #FE9732;
254
  width:50px;
255
  height:50px;
256
  top: 15px;
257
  right: 15px;
258
  -moz-transform: rotate(-360deg);
259
  -webkit-transform: rotate(-360deg);
260
  transform: rotate(-360deg);
261
  -moz-transition-delay: 0.4s;
262
  -webkit-transition-delay: 0.4s;
263
  transition-delay: 0.4s;
264
  cursor:pointer;
265
}
266
 
267
.setting:after{
268
position:absolute;
269
width:7px;
270
height:20px;
271
top:17px;
272
 left:14px;
273
content:"";
274
 background-color:#693E13;
275
  -moz-transform: rotate(45deg);
276
  -webkit-transform: rotate(45deg);
277
  transform: rotate(45deg);
278
 
279
}
280
.setting:before{
281
   border:6px solid #693E13;
282
  border-top:0px;
283
  border-radius:0px 0px 10px 10px;
284
    top: 12px;
285
    left:19px;
286
    height: 6px;
287
  width:10px;
288
  position:absolute;
289
  content:'';
290
  -moz-transform: rotate(45deg);
291
  -webkit-transform: rotate(45deg);
292
  transform: rotate(45deg);
293
 
294
 
295
}
296
 
297
.fly-menu:hover .setting {
298
  top: -20px;
299
  right: -120px;
300
  -moz-transform: rotate(360deg);
301
  -webkit-transform: rotate(360deg);
302
  transform: rotate(360deg);
303
  /*==== Animasi Efek Bouncing ====*/
304
  -moz-animation: it-3 1.2s 1 linear;
305
  -webkit-animation: it-3 1.2s 1 linear;
306
  animation: it-3 1.2s 1 linear;
307
}
308
 
309
@-moz-keyframes setting {
310
  0% {-moz-transform: rotate(-360deg); top: 15px; right: 15px;}
311
  50% {-moz-transform: rotate(0deg); top: -70px; right: -70px}
312
  100% {-moz-transform: rotate(360deg); top:-60px; right: -60px; }
313
}
314
 
315
@-webkit-keyframes setting {
316
  0% {-webkit-transform: rotate(-360deg); top: 15px; right: 15px;}
317
  50% {-webkit-transform: rotate(0deg); top: -70px; right: -70px}
318
  100% {-webkit-transform: rotate(360deg); top:-60px; right: -60px; }
319
}
320
 
321
@keyframes setting {
322
  0% {transform: rotate(-360deg); top: 15px; right: 15px;}
323
  50% {transform: rotate(0deg); top: -70px; right: -70px}
324
  100% {transform: rotate(360deg); top:-60px; right: -60px; }
325
}
326
 
327
 
328
 
329
.portfolio {
330
  background-color:#FDE674;
331
  bottom: -10px;
332
  right: 5px;
333
  width:50px;
334
  height:50px;
335
  -moz-transform: rotate(-360deg);
336
  -webkit-transform: rotate(-360deg);
337
  transform: rotate(-360deg);
338
  -moz-transition-delay: 0.5s;
339
  -webkit-transition-delay: 0.5s;
340
  transition-delay: 0.5s;
341
  cursor:pointer;
342
}
343
 
344
.portfolio:after{
345
content:"";
346
background:#86680E;
347
  width:30px;
348
  height:20px;
349
  position:absolute;
350
  top:16px;
351
  left:10px;
352
}
353
 
354
.portfolio:before{
355
content:"";
356
background:#86680e;
357
  width:15px;
358
  height:10px;
359
  position:absolute;
360
  top:12px;
361
  left:25px;
362
 
363
}
364
.fly-menu:hover .portfolio {
365
  bottom: -90px;
366
  right: -110px;
367
  -moz-transform: rotate(360deg);
368
  -webkit-transform: rotate(360deg);
369
  transform: rotate(360deg);
370
  -moz-animation: portfolio 1.2s 1 linear;
371
  -webkit-animation: portfolio 1.2s 1 linear;
372
  animation: portfolio 1.2s 1 linear;
373
}
374
 
375
@-moz-keyframes portfolio {
376
  0% {-moz-transform: rotate(-360deg); bottom: 15px; right: 15px;}
377
  50% {-moz-transform: rotate(0deg); bottom: -70px; right: -70px}
378
  100% {-moz-transform: rotate(360deg); bottom:-60px; right: -60px; }
379
}
380
 
381
@-webkit-keyframes portfolio {
382
  0% {-webkit-transform: rotate(-360deg); bottom: 15px; right: 15px;}
383
  50% {-webkit-transform: rotate(0deg); bottom: -70px; right: -70px}
384
  100% {-webkit-transform: rotate(360deg); bottom:-60px; right: -60px; }
385
}
386
 
387
@keyframes  portfolio {
388
  0% {transform: rotate(-360deg); bottom: 15px; right: 15px;}
389
  50% {transform: rotate(0deg); bottom: -70px; right: -70px}
390
  100% {transform: rotate(360deg); bottom:-60px; right: -60px; }
391
}
392
 
393
 
394
 
395
 
396
.it-5 {
397
  background: url(http://cahcepu.com/v3/anim/plus2.png) no-repeat center top;
398
  bottom: 15px;
399
  left: 15px;
400
  -moz-transform: rotate(-360deg);
401
  -webkit-transform: rotate(-360deg);
402
  transform: rotate(-360deg);
403
  -moz-transition-delay: 0.6s;
404
  -webkit-transition-delay: 0.6s;
405
  transition-delay: 0.6s;
406
}
407
.fly-menu:hover .it-5 {
408
  bottom: -100px;
409
  -moz-transform: rotate(360deg);
410
  -webkit-transform: rotate(360deg);
411
  transform: rotate(360deg);
412
  -moz-animation: it-5 1.3s 1 linear;
413
  -webkit-animation: it-5 1.3s 1 linear;
414
  animation: it-5 1.3s 1 linear;
415
}
416
 
417
@-moz-keyframes it-5 {
418
  0% {-moz-transform: rotate(-360deg); bottom: 15px;}
419
  50% {-moz-transform: rotate(0deg); bottom: -110px;}
420
  100% {-moz-transform: rotate(360deg); bottom:-100px; }
421
}
422
 
423
@-webkit-keyframes it-5 {
424
  0% {-webkit-transform: rotate(-360deg); bottom: 15px;}
425
  50% {-webkit-transform: rotate(0deg); bottom: -110px;}
426
  100% {-webkit-transform: rotate(360deg); bottom:-100px; }
427
}
428
 
429
@keyframes it-5 {
430
  0% {transform: rotate(-360deg); bottom: 15px;}
431
  50% {transform: rotate(0deg); bottom: -110px;}
432
  100% {transform: rotate(360deg); bottom:-100px; }
433
}
434
 
435
 
436
 
437
.it-6 {
438
  background: magenta;
439
  background: url(http://cahcepu.com/v3/anim/plus2.png) no-repeat center top;
440
  bottom: 15px;
441
  left: 15px;
442
  -moz-transform: rotate(-360deg);
443
  -webkit-transform: rotate(-360deg);
444
  transform: rotate(-360deg);
445
  -moz-transition-delay: 0.7s;
446
  -webkit-transition-delay: 0.7s;
447
  transition-delay: 0.7s;
448
}
449
.fly-menu:hover .it-6 {
450
  bottom: -60px;
451
  left: -60px;
452
  -moz-transform: rotate(-360deg);
453
  -webkit-transform: rotate(-360deg);
454
  transform: rotate(-360deg);
455
  -moz-animation: it-6 1.4s 1 linear;
456
  -webkit-animation: it-6 1.4s 1 linear;
457
  animation: it-6 1.4s 1 linear;
458
}
459
 
460
@-moz-keyframes it-6 {
461
  0% {-moz-transform: rotate(-360deg); bottom: 15px; left: 15px;}
462
  50% {-moz-transform: rotate(0deg); bottom: -70px; left: -70px}
463
  100% {-moz-transform: rotate(360deg); bottom:-60px; left: -60px; }
464
}
465
 
466
@-webkit-keyframes it-6 {
467
  0% {-webkit-transform: rotate(-360deg); bottom: 15px; left: 15px;}
468
  50% {-webkit-transform: rotate(0deg); bottom: -70px; left: -70px}
469
  100% {-webkit-transform: rotate(360deg); bottom:-60px; left: -60px; }
470
}
471
 
472
@keyframes it-6 {
473
  0% {transform: rotate(-360deg); bottom: 15px; left: 15px;}
474
  50% {transform: rotate(0deg); bottom: -70px; left: -70px}
475
  100% {transform: rotate(360deg); bottom:-60px; left: -60px; }
476
}
 

Fly Menu

CSSDeck G+