Ajax Loader
×
HTML 
<head>
1
<head>
2
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
3
</head>
4
 
5
<div id="container">
6
  <div id="corner"><a href="#"><i id="mainbtn" class="fa fa-bars fa-2x fa-inverse"></i></a>
7
    <svg height="200" width="200">
8
  <circle cx="0" cy="0" r="75" fill="black" />
9
</svg>
10
    </div>
11
</div>
12
 
13
<div class='circle-container'>
14
  <a href='#' class='deg0'><i class="fa fa-home fa-2x"></i></a>
15
  <a href='#' class='deg30'><i class="fa fa-cog fa-2x"></i></a>
16
  <a href='#' class='deg60'><i class="fa fa-comments fa-2x"></i></a>
17
  <a href='#' class='deg90'><i class="fa fa-heart fa-2x"></i></a>
18
</div>
19
 
20
<div id="author">
21
  <p>Demo created by
22
    <a href="http://www.derekskinner.tv" target="_blank">Derek Skinner</a></p>
23
  <p>Follow Me on <a href="https://twitter.com/DerekTS9"><i class="fa fa-twitter-square"></i></a>
24
</div>
25
 
 
CSS 
#mainbtn {
1
#mainbtn {
2
  position:absolute;
3
  top:15px;
4
  left:15px;
5
  z-index:2;
6
}
7
 
8
.circle-container {
9
  position: absolute;
10
 top:-50px;
11
 left:-47px;
12
  width: 100px;
13
  height: 100px;
14
z-index:0;
15
}
16
.circle-container a {
17
  display: block;
18
  overflow: hidden;
19
  position: absolute;
20
  width: 32px; height: 32px;
21
  margin:50px;
22
}
23
.circle-container i { display: block; width: 100px; }
24
.deg0 { transform: rotate(-25deg) translate(5.75em) rotate(-0deg);   -webkit-transition: all 0.5s ease-out;
25
  -moz-transition: all 0.5s ease-out;
26
  transition: all 0.5s ease-out;}
27
.deg30 { transform: rotate(-25deg) translate(5.75em) rotate(-30deg);  -webkit-transition: all 0.5s ease-out;
28
  -moz-transition: all 0.5s ease-out;
29
  transition: all 0.5s ease-out; }
30
.deg60 { transform: rotate(-25deg) translate(5.75em) rotate(-60deg);  -webkit-transition: all 0.5s ease-out;
31
  -moz-transition: all 0.5s ease-out;
32
  transition: all 0.5s ease-out; }
33
.deg90 { transform: rotate(-25deg) translate(6em) rotate(-90deg);  -webkit-transition: all 0.5s ease-out;
34
  -moz-transition: all 0.5s ease-out;
35
  transition: all 0.5s ease-out;
36
}
37
 
38
a {
39
  text-decoration:none;
40
  color:black;
41
}
42
 
43
.fa-home:hover {color:tan;}
44
.fa-cog:hover {color:gray;}
45
.fa-comments:hover {color:teal;}
46
.fa-heart:hover {color:red;}
47
 
48
.open.deg0 { transform: rotate(0deg) translate(5.75em) rotate(-0deg); }
49
.open.deg30 { transform: rotate(30deg) translate(5.75em) rotate(-30deg); }
50
.open.deg60 { transform: rotate(60deg) translate(5.75em) rotate(-60deg); }
51
.open.deg90 { transform: rotate(90deg) translate(6em) rotate(-90deg);
52
}
53
 
54
 
55
#author {
56
  font-family:'Squada One';
57
  top: calc(50% + 50px);
58
  left: calc(50% - 225px);
59
  color:black;
60
  font-size:40px;
61
  text-decoration:none;
62
  display: block;
63
  position: absolute;
64
  text-align:center;
65
}
66
 
67
#author a {
68
  color: #43dd33;
69
  text-decoration:none;
70
}
71
 
72
#author a:hover {
73
  color: #000;
74
  text-decoration:none;
75
}
76
 
 
JavaScript 
(function($) {
1
(function($) {
2
  $(function() {
3
    $('#mainbtn').click(function(){
4
      $('.deg0, .deg30, .deg60, .deg90').toggleClass('open')
5
    });
6
  });
7
})(jQuery);
 

Untitled

CSSDeck G+