Ajax Loader
HTML 
<div class="center">
1
<div class="center">
2
<ul class="nav-tt">
3
<li><a class="twitter" href="#" target="_blank"><span>Twitter</span></a></li>
4
<li><a class="gplus" href="#" target="_blank"><span>Google Plus</span></a></li>
5
<li><a class="facebook" href="#" target="_blank"><span>Facebook</span></a></li>
6
<li><a class="linkedin" href="#" target="_blank"><span>LinkedIn</span></a></li>
7
<li><a class="tumblr" href="#" target="_blank"><span>Tumblr</span></a></li>
8
<li><a class="pinterest" href="#" target="_blank"><span>Pinterest</span></a></li>
9
<li><a class="youtube" href="#" target="_blank"><span>Youtube</span></a></li>
10
<li><a class="mail" href="#" target="_blank"><span>Mail</span></a></li>
11
<li><a class="rss" href="#" target="_blank"><span>RSS</span></a></li>
12
  </ul></div>
 
CSS 
html {
1
html {
2
padding: 0;
3
margin: 0;
4
  height: 100%;
5
background: #F7F7F7;
6
box-shadow: inset 0px 0px 1000px 50px rgba(0, 0, 0, 0.38);
7
-webkit-box-shadow: inset 0px 0px 1000px 50px rgba(0, 0, 0, 0.38);
8
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
9
}
10
.center{
11
  margin: 250px 15px
12
}
13
.nav-tt{
14
 padding: 50;
15
 width: 70%;
16
 height: 70px;
17
 margin: 80px auto 30px auto;
18
19
}
20
.nav-tt li{
21
 float: left;
22
 list-style: none;
23
}
24
.nav-tt li a{
25
    display: block;
26
    width: 40px;
27
    height: 40px;
28
    margin: 0 2px;
29
    outline: none;
30
 position: relative;
31
 z-index: 2;
32
    text-indent: -9000px;
33
    text-decoration: none;
34
}
35
.nav-tt li .gplus{
36
    background: url(https://lh4.googleusercontent.com/-4cFkVuK-J9o/UHxDNROuW2I/AAAAAAAAElY/abNRRK-8Qqc/s128/google_plus.png) no-repeat;
37
}
38
.nav-tt li .twitter{
39
    background: url(https://lh4.googleusercontent.com/-wfBGqdU25u0/UHxDPNm_SgI/AAAAAAAAEl4/7k_oJBtjSJY/s128/twitter_1.png) no-repeat;
40
}
41
.nav-tt li .pinterest{
42
    background: url(https://lh3.googleusercontent.com/-qyf8onE2vGQ/UHxDOOke6YI/AAAAAAAAElo/2fVKKCD2Kvw/s128/pinterest.png) no-repeat;
43
}
44
.nav-tt li .facebook{
45
    background: url(https://lh6.googleusercontent.com/-MJZ3ppOsD3g/UHxDNlVHuxI/AAAAAAAAElg/k8f5b_DVM4E/s128/fb_1.png) no-repeat;
46
}
47
.nav-tt li .linkedin{
48
    background: url(https://lh5.googleusercontent.com/-2-olf15YoqY/UHxDNzIdb1I/AAAAAAAAElk/5kHZeTBfdlA/s128/linkedin.png)no-repeat;
49
}
50
.nav-tt li .tumblr{
51
    background: url(https://lh5.googleusercontent.com/-6rP4L0v2_68/UHxDO2hBAJI/AAAAAAAAEls/tm1r69EhCRw/s128/tumblr.png) no-repeat;
52
}
53
.nav-tt li .youtube{
54
 background: url(https://lh5.googleusercontent.com/-X49px-YaEfY/UHxDPEPM7DI/AAAAAAAAEl0/230Z4oxHNzE/s128/you_tube.png) no-repeat;
55
}
56
.nav-tt li .mail{
57
 background: url(https://lh4.googleusercontent.com/-Z4beVXz8HJI/UHxDNbnCR2I/AAAAAAAAElU/BfBkHDhqkd8/s32/email.png) no-repeat;
58
}
59
.nav-tt li .rss{
60
 background: url(https://lh4.googleusercontent.com/-_EyfM2ruhco/UHxDOsct_rI/AAAAAAAAEl8/GuByt66SWxk/s128/rss.png) no-repeat;
61
}
62
.nav-tt li a span{
63
 width: 80px;
64
 height: 80px;
65
 line-height: 80px;
66
 padding: 10px;
67
 left: 50%;
68
 margin-left: -60px;
69
 font-family: 'Alegreya SC', Georgia, serif;
70
 font-weight: 400;
71
 font-style: italic;
72
 font-size: 14px;
73
 color: #719DAB;
74
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
75
 text-align: center;
76
 border: 5px solid #ffffff;
77
 background: rgba(255,255,255,0.5);
78
 text-indent: 0px;
79
 position: absolute;
80
 pointer-events: none;
81
 border-radius: 50%;
82
 bottom: -40px;
83
 opacity: 0;
84
 box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
85
 -webkit-transform: scale(0);
86
 -moz-transform: scale(0);
87
 -o-transform: scale(0);
88
 -ms-transform: scale(0);
89
 transform: scale(0);
90
 -webkit-transition: all 0.3s ease-in-out;
91
 -moz-transition: all 0.3s ease-in-out;
92
 -o-transition: all 0.3s ease-in-out;
93
 -ms-transition: all 0.3s ease-in-out;
94
 transition: all 0.3s ease-in-out;
95
96
}
97
.nav-tt li a span:before,
98
.nav-tt li a span:after{
99
 content: '';
100
 position: absolute;
101
 bottom: -15px;
102
 left: 50%;
103
 margin-left: -9px;
104
 width: 0;
105
 height: 0;
106
 border-left: 10px solid transparent;
107
 border-right: 10px solid transparent;
108
 border-top: 11px solid rgba(0,0,0,0.1);
109
}
110
.nav-tt li a span:after{
111
 bottom: -13px;
112
 margin-left: -10px;
113
 border-top: 10px solid #ffffff;
114
}
115
.nav-tt li a:hover span{
116
 opacity: 0.9;
117
 bottom: 50px;
118
 -webkit-transform: scale(1);
119
 -moz-transform: scale(1);
120
 -o-transform: scale(1);
121
 -ms-transform: scale(1);
122
 transform: scale(1);
123
}
124
 
 

Menu tooltip con Css3

CSSDeck G+