Ajax Loader
HTML 
<div class="container">
1
<div class="container">
2
  <div class="icon" id="icon-1">
3
    <span class="tooltip"></span>
4
  </div>
5
  <div class="icon" id="icon-2"></div>
6
</div>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Raleway:400,200,500,700,800);
1
@import url(http://fonts.googleapis.com/css?family=Raleway:400,200,500,700,800);
2
 
3
* {
4
  margin:0;
5
  padding:0;
6
  border:0;
7
}
8
 
9
.tooltip {
10
  position:absolute;
11
  z-index:2;
12
  top: 74%;
13
  padding:10px 26px;
14
  background-color:#69C;
15
  color:#DDD;
16
  font:20px "Raleway", sans-serif;
17
  border-radius:4px;
18
  text-decoration: none;
19
  box-shadow: 1px 1px 2px 1.5px #CCC;
20
  opacity:0;
21
  margin-right:-50px;
22
  transition:all 0.7s ease-in-out;
23
}
24
 
25
.tooltip:before {
26
  content: "Created by Rafael Lima";
27
}
28
 
29
.tooltip:after {
30
  content:"";
31
  position: absolute;
32
  top:-18px;
33
  left: 50%;
34
  margin-left: -20px;
35
  border:10px solid transparent;
36
  border-bottom-color:#69C;
37
}
38
 
39
.container {
40
  width:100%;
41
  height:100%;
42
  position: absolute;
43
  overflow: hidden;
44
  z-index:-1;
45
  background: radial-gradient(ellipse at center, #ECECFB 40%, #DBDBEA 70%);
46
  box-shadow: inset 0 0 80px 60px rgba(250, 250, 250, 0.6);
47
  -webkit-animation: fadeIn 1.2s ease-in-out;
48
}
49
 
50
.icon {
51
  position: absolute;
52
  margin-top:-170px;
53
  margin-left:-130px;
54
  background-image: -webkit-linear-gradient(#D6D6D6 -5%, #DBDBDB 20%, #ECECFB 50%, #DBDBDB 80%, #D6D6D6 105%);
55
  background-image: -moz-linear-gradient(#D6D6D6 -5%, #DBDBDB 20%, #ECECFB 50%, #DBDBDB 80%, #D6D6D6 105%);
56
  background-image: -o-linear-gradient(#D6D6D6 -5%, #DBDBDB 20%, #ECECFB 50%, #DBDBDB 80%, #D6D6D6 105%);
57
  background-image: -ms-linear-gradient(#D6D6D6 -5%, #DBDBDB 20%, #ECECFB 50%, #DBDBDB 80%, #D6D6D6 105%);
58
  background-image: -linear-gradient(#D6D6D6 -5%, #DBDBDB 20%, #ECECFB 50%, #DBDBDB 80%, #D6D6D6 105%);
59
  border-radius:12px;
60
  border-top-right-radius:60px;
61
  border:2px solid rgba(204, 204, 204, 0.7);
62
  box-shadow: inset 0 0 16px 10px #DDD;
63
}
64
 
65
/* ---------- Icones ---------- */
66
 
67
#icon-1 {
68
  width:260px;
69
  height:340px;
70
  top:50%; left:50%;
71
  z-index:1;
72
  transition:all 0.7s ease-in-out;
73
  -webkit-animation: slideLeftBig 2.6s ease-in-out;
74
}
75
 
76
#icon-1:hover .tooltip {
77
  opacity:1;
78
  margin-right:-20px;
79
  transition:all 0.7s ease-in-out;
80
}
81
 
82
#icon-2 {
83
  width:240px;
84
  height:320px;
85
  top:48%; left:55.8%;
86
  z-index: 0;
87
  -webkit-transform: rotate(8deg);
88
  -moz-transform: rotate(8deg);
89
  -ms-transform: rotate(8deg);
90
  -o-transform: rotate(8deg);
91
  transform: rotate(8deg);
92
  -webkit-animation: slideRightBig 2.4s ease-in-out;
93
}
94
 
95
/* ---------- Dobra ---------- */
96
 
97
.icon:before {
98
  content:"";
99
  width:34%;
100
  height:27%;
101
  position: absolute;
102
  top:0; right:0;
103
  background-image: -webkit-linear-gradient(45deg, #D6D6D6 -5%, #DBDBDB 20%, #ECECFB 60%, #DBDBDB 80%, #D6D6D6 105%);
104
  background-image: -moz-linear-gradient(45deg, #D6D6D6 -5%, #DBDBDB 20%, #ECECFB 60%, #DBDBDB 80%, #D6D6D6 105%);
105
  background-image: -ms-linear-gradient(45deg, #D6D6D6 -5%, #DBDBDB 20%, #ECECFB 60%, #DBDBDB 80%, #D6D6D6 105%);
106
  background-image: -o-linear-gradient(45deg, #D6D6D6 -5%, #DBDBDB 20%, #ECECFB 60%, #DBDBDB 80%, #D6D6D6 105%);
107
  background-image: -linear-gradient(45deg, #D6D6D6 -5%, #DBDBDB 20%, #ECECFB 60%, #DBDBDB 80%, #D6D6D6 105%);
108
  border-top-right-radius:60px;
109
  border-bottom-left-radius:6px;
110
  border-left:2px solid rgba(204, 204, 204, 0.7);
111
  border-bottom:2px solid rgba(204, 204, 204, 0.7);
112
  transition:all 0.7s ease-in-out;
113
  -webkit-animation: coolEffect 5s ease-in 3s infinite alternate none;
114
}
115
 
116
/* ---------- Pautas ---------- */
117
 
118
.icon:after {
119
  content:"";
120
  width:65%;
121
  height:50px;
122
  position: absolute;
123
  top:48%; left:50%;
124
  margin-left:-32.25%;
125
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ccc), color-stop(0.2, #ccc), color-stop(0.2, #fff), color-stop(0.4, #fff), color-stop(0.4, #ccc), color-stop(0.6, #ccc), color-stop(0.6, #fff), color-stop(0.8, #fff), color-stop(0.8, #ccc), to(#ccc));
126
  background-image: -webkit-linear-gradient(#ccc 0%, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
127
  background-image: -moz-linear-gradient(#ccc 0%, #ccc 20%, #DBDBDB 20%, #DBDBDB 40%, #ccc 40%, #ccc 60%, #DBDBDB 60%, #DBDBDB 80%, #ccc 80%, #ccc 100%);
128
  background-image: -o-linear-gradient(#ccc 0%, #ccc 20%, #DBDBDB 20%, #DBDBDB 40%, #ccc 40%, #ccc 60%, #DBDBDB 60%, #DBDBDB 80%, #ccc 80%, #ccc 100%);
129
  background-image: linear-gradient(#ccc 0%, #ccc 20%, #ECECFB 20%, #ECECFB 40%, #ccc 40%, #ccc 60%, #ECECFB 60%, #ECECFB 80%, #ccc 80%, #ccc 100%);
130
  border-radius:2px;
131
  opacity:0.7;
132
}
133
 
134
.author {
135
  position: absolute;
136
  left: 42%;
137
  bottom: 6%;
138
  color: #1abc9c;
139
  font: 1.4em 'Raleway', sans-serif;
140
  font-weight: 500;
141
}
142
 
143
@keyframes fadeIn {
144
  0%,40% { opacity: 0; }
145
  60, 80% { opacity: 0.4; }
146
  100% { opacity: 1; }
147
}
148
 
149
@keyframes slideLeftBig {
150
  0% {
151
    transform: translateX(-600px);
152
  }
153
  60% {
154
    transform: translateX(0) skew(-9deg);
155
  }
156
  78% {
157
    transform: translateX(-70px);
158
  }
159
  92% {
160
    transform: translateX(0);
161
  }
162
  100% {
163
    transform: translateX(0);
164
  }
165
}
166
 
167
@keyframes slideRightBig {
168
  0% {
169
    transform: translateX(600px) rotate(2deg);
170
  }
171
  52% {
172
    transform: rotate(-4deg) skew(20deg);
173
  }
174
  90% {
175
    transform: rotate(6deg) skew(-10deg);
176
  }
177
  100% {
178
    transform: translateX(0) rotate(8deg);
179
  }
180
}
181
 
182
@keyframes coolEffect {
183
  0% {
184
    width: 34%;
185
    height: 27%;
186
  }
187
  50% {
188
    width: 28%;
189
    height: 20%;
190
  }
191
  100% {
192
    width: 34%;
193
    height: 27%;
194
  }
195
}
 

Interactive Icons

CSSDeck G+