Ajax Loader
HTML 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
1
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
2
<link href='http://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>
3
 
4
<div id="circle">
5
  <i class="icon1 fa fa-pencil fa-lg"></i>
6
  <i class="icon2 fa fa-star fa-lg"></i>
7
</div>
8
<div id="sub">
9
  <div id="circle">
10
    <i class="icon1 fa fa-star fa-lg"></i>
11
    <i class="icon2 fa fa-plus fa-lg"></i>
12
    <span>One</span>
13
  </div>
14
  <div id="circle">
15
    <i class="icon1 fa fa-star fa-lg"></i>
16
    <i class="icon2 fa fa-plus fa-lg"></i>
17
    <span>Two</span>
18
  </div>
19
  <div id="circle">
20
    <i class="icon1 fa fa-star fa-lg"></i>
21
    <i class="icon2 fa fa-plus fa-lg"></i>
22
    <span>Three</span>
23
  </div>
24
  </div>
 
CSS 
/* ///// MAIN CIRCLE ///// */
1
/* ///// MAIN CIRCLE ///// */
2
#circle {
3
    width: 80px;
4
    height: 80px;
5
    border-radius: 50%;
6
    background: #747392;
7
    position: absolute;
8
    z-index:2;
9
    top: 25px;
10
    left: 25px;
11
    box-shadow: 0 0 4px rgba(0, 0, 0, .11), 0 4px 8px rgba(0, 0, 0, .22);
12
    cursor: pointer;
13
}
14
#circle:after {
15
    content:'';
16
    width: 10px;
17
    height: 10px;
18
    position: absolute;
19
    border-radius: 50%;
20
    background: rgba(81, 80, 122, 0.6);
21
    left: 35px;
22
    top: 35px;
23
}
24
#circle i {
25
    font-size: 40px;
26
    color: #fff;
27
    position: absolute;
28
    top: 24px;
29
    left: 24px;
30
    z-index: 1;
31
}
32
#circle i.icon1 {
33
    opacity: 1;
34
}
35
#circle i.icon2 {
36
    opacity: 0;
37
    top: 25px;
38
    left: 22px;
39
}
40
/* ANIMATION */
41
#circle, #circle i, #circle:after {
42
    -webkit-transition: all .2s cubic-bezier(.4, 0, .2, 1);
43
    transition: all .2s cubic-bezier(.4, 0, .2, 1);
44
}
45
/* HOVER */
46
#circle:hover {
47
    background: #626186;
48
    box-shadow: 0 0 4px rgba(0, 0, 0, .15), 0 4px 8px rgba(0, 0, 0, .30);
49
}
50
#circle:hover:after {
51
    width: 80px;
52
    height: 80px;
53
    left: 0;
54
    top: 0;
55
}
56
#circle:hover > i {
57
    -webkit-transform: rotate(720deg);
58
    transform: rotate(720deg);
59
}
60
#circle:hover > i.icon1 {
61
    opacity: 0;
62
}
63
#circle:hover > i.icon2 {
64
    opacity: 1;
65
}
66
 
67
/* ///// SUB CIRCLES ///// */
68
 #sub {
69
  width: 100px;
70
  height: 50%;
71
  z-index: 1;
72
  position: absolute;
73
  visibility:hidden;
74
}
75
#sub #circle {
76
    width: 50px;
77
    height: 50px;
78
    top: 0;
79
    left: 40px;
80
    opacity: 0;
81
    transition: 0.2s opacity;
82
}
83
#sub #circle:nth-child(1) {
84
    top: 120px;
85
    background: #95507f;
86
}
87
#sub #circle:nth-child(2) {
88
    top: 180px;
89
    background: #4e935c;
90
}
91
#sub #circle:nth-child(3) {
92
    top: 240px;
93
    background: #9f4b49;
94
}
95
#sub #circle:nth-child(1):after {
96
    background: rgba(126, 53, 108, 0.6);
97
}
98
#sub #circle:nth-child(2):after {
99
    background: rgba(49, 124, 61, 0.6);
100
}
101
#sub #circle:nth-child(3):after {
102
    background: rgba(135, 43, 45, 0.6);
103
}
104
#sub #circle:after {
105
    left: 20px;
106
    top: 20px;
107
}
108
#sub #circle i {
109
    font-size: 20px;
110
    top: 18px;
111
    left: 16px;
112
}
113
#sub #circle i.icon1 {
114
    opacity: 1;
115
}
116
#sub #circle i.icon2 {
117
    opacity: 0;
118
}
119
/* HOVER */
120
#sub #circle:hover:after {
121
    width: 50px;
122
    height: 50px;
123
    left: 0;
124
    top: 0;
125
}
126
#circle:hover + #sub #circle:nth-child(1) {
127
    opacity:1;
128
    transition-delay:0.05s;
129
}
130
#circle:hover + #sub #circle:nth-child(2) {
131
    opacity:1;
132
    transition-delay:0.1s;
133
}
134
#circle:hover + #sub #circle:nth-child(3) {
135
    opacity:1;
136
    transition-delay:0.15s;
137
}
138
#sub #circle:hover > i {
139
    -webkit-transform: rotate(90deg);
140
    transform: rotate(90deg);
141
}
142
#sub #circle:hover > i.icon1 {
143
    opacity: 0;
144
}
145
#sub #circle:hover > i.icon2 {
146
    opacity: 1;
147
}
148
#circle:hover + #sub {
149
visibility:visible;
150
}
151
#sub:hover {
152
visibility:visible;
153
}
154
#sub:hover > #circle {
155
    opacity:1;
156
}
157
/* ///// SUB TITLES ///// */
158
#circle span {
159
  display: block;
160
  margin-right: -200px;
161
  margin-top: 16px;
162
  color: rgba(0, 0, 0,0.7);
163
  font-family: 'Comfortaa', sans-serif;
164
  text-transform: uppercase;
165
  font-weight: 400;
166
  text-align: left;
167
  padding-left: 60px;
168
  font-size: 1.1em;
169
  letter-spacing: 0.25em;
170
  opacity: 0;
171
  -webkit-transition: all .4s cubic-bezier(.4, 0, .2, 2);
172
  transition: all .4s cubic-bezier(.4, 0, .2, 2);
173
}
174
/* HOVER */
175
#sub #circle:hover > span {
176
    opacity: 1;
177
    padding-left: 75px;
178
}
 

Animated Circle Menu FULL CSS

CSSDeck G+