Ajax Loader
HTML 
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
1
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
2
 
3
</head>
4
<body>
5
 
6
  <div class="container">
7
8
    <ul class="action-bar clearfix">
9
 
10
      <li>
11
        <a href="#" class="like">
12
          <span class="zocial-twitter"></span>
13
          <span class="tooltip">Follow</span>
14
        </a>
15
      </li>
16
 
17
      <li>
18
        <a href="#" class="favourite">
19
          <span class="zocial-googleplus"></span>
20
          <span class="tooltip">Circle us</span>
21
        </a>
22
      </li>
23
 
24
      <li>
25
        <a href="#" class="comment">
26
          <span class="zocial-facebook"></span>
27
          <span class="tooltip">Like us</span>
28
        </a>
29
      </li>
30
 
31
      <li>
32
        <a href="#" class="share">
33
          <span class="zocial-rss"></span>
34
          <span class="tooltip">Subscribe</span>
35
        </a>
36
      </li>
37
 
38
    </ul>
39
 
40
  </div>
 
CSS 
@charset "utf-8";
1
@charset "utf-8";
2
/* CSS Document */
3
 
4
/* ---------- FONTAWESOME ---------- */
5
/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */
6
/* ---------- http://weloveiconfonts.com/ ---------- */
7
 
8
@import url(http://weloveiconfonts.com/api/?family=zocial);
9
 
10
/* zocial */
11
[class*="zocial-"]:before {
12
  font-family: 'zocial', sans-serif;
13
}
14
/* ---------- GENERAL ---------- */
15
 
16
 
17
a { text-decoration: none; }
18
 
19
ul {
20
  list-style: none;
21
  margin: 0;
22
  padding: 0;
23
}
24
 
25
.clearfix { *zoom: 1; }
26
.clearfix:before, .clearfix:after {
27
  content: "";
28
  display: table;
29
}
30
.clearfix:after { clear: both; }
31
 
32
.container {
33
  display: block;
34
  height: 64px;
35
  left: 50%;
36
  margin: -32px 0 0 -128px; /* -(height / 2) & -(width / 2) */
37
  position: absolute;
38
  top: 50%;
39
  width: 256px;
40
}
41
/* ---------- Action Bar ---------- */
42
 
43
.action-bar li {
44
  float: left;
45
}
46
 
47
.action-bar a {
48
  -webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
49
  box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
50
  color: #e7e7e7;
51
  display: block;
52
  font-size: 32px;
53
  height: 64px;
54
  line-height: 64px;
55
  position: relative;
56
  text-align: center;
57
  -webkit-transition: background .3s;
58
  -moz-transition: background .3s;
59
  -ms-transition: background .3s;
60
  -o-transition: background .3s;
61
  transition: background .3s;
62
  width: 64px;
63
}
64
 
65
.action-bar a:hover .tooltip {
66
  margin-top: 16px;
67
  opacity: 1;
68
}
69
 
70
.tooltip {
71
  border-radius: 3px;
72
  font-size: 14px;
73
  height: 28px;
74
  left: 50%;
75
  line-height: 28px;
76
  margin: 0 0 0 -50px;
77
  opacity: 0;
78
  position: absolute;
79
  top: 100%;
80
  -webkit-transition: margin-top .3s, opacity .3s;
81
  -moz-transition: margin-top .3s, opacity .3s;
82
  -ms-transition: margin-top .3s, opacity .3s;
83
  -o-transition: margin-top .3s, opacity .3s;
84
  transition: margin-top .3s, opacity .3s;
85
  width: 100px;
86
}
87
 
88
.tooltip:before {
89
  content: "";
90
  height: 8px;
91
  left: 50%;
92
  margin: -4px 0 0 -4px;
93
  position: absolute;
94
  -webkit-transform: rotate(45deg);
95
  -moz-transform: rotate(45deg);
96
  -ms-transform: rotate(45deg);
97
  -o-transform: rotate(45deg);
98
  transform: rotate(45deg);
99
  width: 8px;
100
}
101
 
102
.like,
103
.like .tooltip,
104
.like .tooltip:before { background: #65B1F8; }
105
.like:hover { background: #65B1F8; }
106
 
107
.favourite,
108
.favourite .tooltip,
109
.favourite .tooltip:before { background: #c93037; }
110
.favourite:hover { background: #b02b32; }
111
 
112
.comment,
113
.comment .tooltip,
114
.comment .tooltip:before { background: #43438e; }
115
.comment:hover { background: #393978; }
116
 
117
.share,
118
.share .tooltip,
119
.share .tooltip:before { background: #FF8000; }
120
.share:hover { background: #FF8000; }
 

Socio

CSSDeck G+