Ajax Loader
HTML 
<!-- Author : Rafael Lima -->
1
<!-- Author : Rafael Lima -->
2
<html lang="pt-BR">
3
  <head>
4
    <meta charset="utf-8" />
5
    <title>Bússola com CSS3 | Compass with CSS3</title>
6
  </head>
7
  <body>
8
    <!-- Bússola | Compass -->
9
    <div class="compass">
10
      <div class="compass-main">
11
        <!--  Rótulos | Labels -->
12
        <span class="north-label">N</span>
13
        <span class="east-label">E</span>
14
        <span class="west-label">W</span>
15
        <span class="south-label">S</span>
16
        <!-- Rosa dos Ventos | Compass Rose -->
17
        <div class="compass-rose">
18
          <!-- Pontos Cardiais | Cardial Points -->
19
          <div class="cardial-points">
20
            <div class="north-pointer pointer"></div>
21
            <div class="east-pointer pointer"></div>
22
            <div class="west-pointer pointer"></div>
23
            <div class="south-pointer pointer"></div>
24
          </div>
25
          <!-- Pontos Ordinais | Ordinal Points -->
26
          <div class="ordinal-points">
27
            <div class="northeast-pointer"></div>
28
            <div class="northwest-pointer"></div>
29
            <div class="southeast-pointer"></div>
30
            <div class="south-west-pointer"></div>
31
          </div>
32
        </div>
33
        <!-- Bt Center -->
34
        <div class="bt-center"></div>
35
        <!-- Agulha Magnética | Dip Needle -->
36
        <div class="dip-needle"></div>
37
      </div>
38
    </div>
39
    <p class="create">Created by <a href="https://github.com/rafael-lima" class="author">Rafael Lima</a>.</p>
40
  </body>
41
</html>
 
CSS 
@import url('http://fonts.googleapis.com/css?family=Raleway:400,200,300,500,600,700');
1
@import url('http://fonts.googleapis.com/css?family=Raleway:400,200,300,500,600,700');
2
 
3
body {
4
  font: 17px 'Raleway Light', sans-serif;
5
  background: rgba(200,200,200,.3);
6
  color: #888;
7
  text-align: center;
8
}
9
 
10
.compass {
11
  width: 260px;
12
  height: 260px;
13
  position: relative;
14
  margin: 150px auto;
15
  margin-bottom: 50px;
16
  background: linear-gradient(#DDD, #CCC 20%, #DDD);
17
  border-radius: 50%;
18
  box-shadow: 0 2px 6px .8px #999;
19
  animation: sliding 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
20
  -webkit-animation: sliding 1.9s ease-in-out;
21
}
22
 
23
.compass:after {
24
  content: "";
25
  width: 20px;
26
  height: 20px;
27
  position: absolute;
28
  top: -26px;
29
  left: 50%;
30
  margin-left: -16px;
31
  border: 6px solid #DDD;
32
  border-radius: 50%;
33
}
34
 
35
.compass-main {
36
  width: 94%;
37
  height: 94%;
38
  position: absolute;
39
  top: 50%; left: 50%;
40
  margin-top: -47%; margin-left: -47%;
41
  background: radial-gradient(#EEE 50%, #DDD 80%);
42
  border-radius: 50%;
43
}
44
 
45
.compass-rose {
46
  width: 70%;
47
  height: 70%;
48
  position: absolute;
49
  top: 50%; left: 50%;
50
  margin-top: -35%; margin-left: -35%;
51
}
52
 
53
.pointer {
54
  width: 0; height: 0;
55
  position: absolute;
56
  border: 80px solid;
57
  border-left: 14px solid; border-right: 14px solid;
58
}
59
 
60
.cardial-points .pointer {
61
  border-color: #DDD transparent transparent transparent;
62
}
63
 
64
.ordinal-points .pointer {
65
  border-color: #AAA transparent transparent transparent;
66
}
67
 
68
.north-pointer {
69
  top: -40px; margin-top: -40px;
70
  left: 50%; margin-left: -14px;
71
  -webkit-transform: rotate(180deg);
72
}
73
 
74
.east-pointer {
75
  top: 28%; right: -10px;
76
  margin-top: -40px;
77
  -webkit-transform: rotate(-90deg);
78
}
79
 
80
.west-pointer {
81
  top: 28%; left: -10px;
82
  margin-top: -40px;
83
  -webkit-transform: rotate(90deg);
84
}
85
 
86
.south-pointer {
87
  bottom: -40px; margin-bottom: -40px;
88
  left: 50%; margin-left: -14px;
89
}
90
 
91
 
92
 
93
.bt-center {
94
  width: 16px;
95
  height: 16px;
96
  position: absolute;
97
  z-index: 100000;
98
  top: 50%; left: 50%;
99
  margin-top: -8px; margin-left: -8px;
100
  display: block;
101
  background: #444;
102
  border-radius: 50%;
103
}
104
 
105
.dip-needle {
106
  width: 12px;
107
  height: 12px;
108
  position: absolute;
109
  z-index: 999;
110
  top: 50%; left: 50%;
111
  margin-top: -6px; margin-left: -6px;
112
  -webkit-animation: animation-dip-needle 1s linear 0s infinite;
113
}
114
 
115
.dip-needle:after {
116
  content: "";
117
  width: 0; height: 0;
118
  position: absolute;
119
  top: -138px; right: -54px;
120
  border: 80px solid;
121
  border-left: 6px solid; border-right: 6px solid;
122
  border-color: #B20000 transparent transparent transparent;
123
  -webkit-transform: rotate(220deg);
124
  z-index: -10000;
125
}
126
 
127
.dip-needle:before {
128
  content: "";
129
  display: block;
130
  width: 0; height: 0;
131
  position: absolute;
132
  top: -10px; right: 54px;
133
  border: 80px solid;
134
  border-left: 6px solid; border-right: 6px solid;
135
  border-color: #CCC transparent transparent transparent;
136
  -webkit-transform: rotate(40deg);
137
}
138
 
139
.north-label {
140
  position: absolute;
141
  top: 10px; left: 116px;
142
}
143
 
144
.east-label {
145
  position: absolute;
146
  top: 114px; right: 12px;
147
}
148
 
149
.west-label {
150
  position: absolute;
151
  top: 114px; left: 12px;
152
}
153
 
154
.south-label {
155
  position: absolute;
156
  bottom: 6px; left: 116px;
157
}
158
 
159
.create {
160
  font-size: 1.2em;
161
  -webkit-animation: fadeIn 2.2s ease-in;
162
}
163
 
164
.author {
165
  text-decoration: none;
166
  color: #1abc9c;
167
}
168
 
169
@keyframes "animation-dip-needle" {
170
  0% { transform: rotate(-70deg); }
171
  30% { transform: rotate(-30deg); }
172
  50% { transform: rotate(-40deg); }
173
  70% { transform: rotate(-20deg); }
174
  100% { transform: rotate(-70deg); }
175
}
176
 
177
@keyframes "fadeIn" {
178
  from {
179
    opacity: 0;
180
  }
181
  to {
182
    opacity: 1;
183
  }
184
}
185
 
186
@keyframes "sliding" {
187
  0% { transform: translateY(-800px); opacity:0; }
188
  70%{ opacity:0.4; }
189
  80% { transform: translateY(48px); opacity:0.6; }
190
  100% { transform: translateY(0); opacity:1; }
191
}
 

Compass with Pure CSS3

CSSDeck G+