Ajax Loader
HTML 
<!doctype html>
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <title>Clock App Icon</title>
6
 
7
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700">
8
 
9
</head>
10
<body>
11
 
12
  <div class="container">
13
 
14
    <div class="app">
15
 
16
      <div class="clock">
17
 
18
        <div class="clock-inner">
19
 
20
          <div class="clock-center"></div>
21
          <div id="clock-seconds"></div>
22
          <div id="clock-minutes"></div>
23
          <div id="clock-hours"></div>
24
 
25
          <ul class="clock-numbers">
26
 
27
            <li>12</li>
28
            <li>3</li>
29
            <li>6</li>
30
            <li>9</li>
31
 
32
          </ul>
33
 
34
        </div> <!-- end clock-inner -->
35
 
36
      </div> <!-- end clock -->
37
 
38
      <p class="app-title">Clock</p>
39
 
40
    </div> <!-- end app -->
41
 
42
  </div> <!-- end container -->
43
44
</body>
45
</html>
 
CSS 
body {
1
body {
2
  background: #282e3a;
3
  color: #f9f9f9;
4
  font: 100%/1.5em "Droid Sans", sans-serif;
5
  margin: 0;
6
}
7
 
8
p { margin: 0; }
9
 
10
ul {
11
  list-style: none;
12
  margin: 0;
13
  padding: 0;
14
}
15
 
16
/* ---------- GENERAL-CLASSES ---------- */
17
 
18
.container {
19
  height: 228px;
20
  left: 50%;
21
  margin: -124px 0 0 -100px;
22
  position: absolute;
23
  top: 50%;
24
  width: 200px;
25
}
26
 
27
/* ---------- APP ---------- */
28
 
29
.app {
30
  text-align: center;
31
}
32
 
33
.app-title {
34
  font-size: 24px;
35
  font-weight: bold;
36
  text-shadow: 0 5px #15181f;
37
}
38
 
39
.clock {
40
  background: #1a1d24;
41
  border-radius: 35px;
42
  -webkit-box-shadow: 0 8px 0 #15181f;
43
  box-shadow: 0 8px 0 #15181f;
44
  height: 200px;
45
  margin-bottom: 24px;
46
  position: relative;
47
  width: 200px;
48
}
49
 
50
.clock-inner {
51
  background: #f9f9f9;
52
  border-radius: 50%;
53
  height: 160px;
54
  left: 50%;
55
  margin: -80px 0 0 -80px;
56
  position: absolute;
57
  top: 50%;
58
  width: 160px;
59
}
60
 
61
.clock-center,
62
#clock-seconds,
63
#clock-minutes,
64
#clock-hours {
65
  left: 50%;
66
  position: absolute;
67
  top: 50%;
68
}
69
 
70
.clock-center {
71
  background: #1a1d24;
72
  border-radius: 50%;
73
  height: 12px;
74
  margin: -6px 0 0 -6px;
75
  width: 12px;
76
  z-index: 4;
77
}
78
 
79
#clock-seconds {
80
  background: #c40206;
81
  border-radius: 2px;
82
  height: 60px;
83
  margin: -60px 0 0 -1px;
84
  -webkit-transform-origin: 1px 60px;
85
  -moz-transform-origin: 1px 60px;
86
  -ms-transform-origin: 1px 60px;
87
  -o-transform-origin: 1px 60px;
88
  transform-origin: 1px 60px;
89
  -webkit-transform: rotate(0deg);
90
  -moz-transform: rotate(0deg);
91
  -ms-transform: rotate(0deg);
92
  -o-transform: rotate(0deg);
93
  transform: rotate(0deg);
94
  width: 2px;
95
  z-index: 3;
96
}
97
 
98
#clock-minutes {
99
  background: #aaa;
100
  border-radius: 4px;
101
  height: 50px;
102
  margin: -50px 0 0 -2px;
103
  -webkit-transform-origin: 2px 50px;
104
  -moz-transform-origin: 2px 50px;
105
  -ms-transform-origin: 2px 50px;
106
  -o-transform-origin: 2px 50px;
107
  transform-origin: 2px 50px;
108
  -webkit-transform: rotate(0deg);
109
  -moz-transform: rotate(0deg);
110
  -ms-transform: rotate(0deg);
111
  -o-transform: rotate(0deg);
112
  transform: rotate(0deg);
113
  width: 4px;
114
  z-index: 2;
115
}
116
 
117
#clock-hours {
118
  background: #1a1d24;
119
  border-radius: 4px;
120
  height: 40px;
121
  margin: -40px 0 0 -2px;
122
  -webkit-transform-origin: 2px 40px;
123
  -moz-transform-origin: 2px 40px;
124
  -ms-transform-origin: 2px 40px;
125
  -o-transform-origin: 2px 40px;
126
  transform-origin: 2px 40px;
127
  -webkit-transform: rotate(0deg);
128
  -moz-transform: rotate(0deg);
129
  -ms-transform: rotate(0deg);
130
  -o-transform: rotate(0deg);
131
  transform: rotate(0deg);
132
  width: 4px;
133
  z-index: 1;
134
}
135
 
136
.clock-numbers {
137
  color: #888;
138
  display: block;
139
  font-size: 16px;
140
  font-weight: bold;
141
  height: 120px;
142
  margin: -60px 0 0 -60px;
143
  left: 50%;
144
  position: absolute;
145
  top: 50%;
146
  width: 120px;
147
}
148
 
149
.clock-numbers li {
150
  height: 20px;
151
  line-height: 20px;
152
  margin: -10px;
153
  position: absolute;
154
  text-align: center;
155
  width: 20px;
156
}
157
 
158
.clock-numbers li:nth-child(1) {
159
  left: 50%;
160
  top: 0;
161
}
162
 
163
.clock-numbers li:nth-child(2) {
164
  right: 0;
165
  top: 50%;
166
}
167
 
168
.clock-numbers li:nth-child(3) {
169
  bottom: 0;
170
  left: 50%;
171
}
172
 
173
.clock-numbers li:nth-child(4) {
174
  left: 0;
175
  top: 50%;
176
}
 
JavaScript 
(function() {
1
(function() {
2
 
3
  var clockSeconds = document.getElementById('clock-seconds'),
4
  clockMinutes = document.getElementById('clock-minutes'),
5
  clockHours = document.getElementById('clock-hours');
6
 
7
  function getTime() {
8
 
9
    var date = new Date(),
10
    seconds = date.getSeconds(),
11
    minutes = date.getMinutes(),
12
    hours = date.getHours(),
13
 
14
    degSeconds = seconds * 360 / 60,
15
    degMinutes = (minutes + seconds / 60) * 360 / 60,
16
    degHours = (hours + minutes / 60 + seconds / 60 / 60) * 360 / 12;
17
 
18
    clockSeconds.setAttribute('style', '-webkit-transform: rotate(' + degSeconds + 'deg); -moz-transform: rotate(' + degSeconds + 'deg); -ms-transform: rotate(' + degSeconds + 'deg); -o-transform: rotate(' + degSeconds + 'deg); transform: rotate(' + degSeconds + 'deg);');
19
    clockMinutes.setAttribute('style', '-webkit-transform: rotate(' + degMinutes + 'deg); -moz-transform: rotate(' + degMinutes + 'deg); -ms-transform: rotate(' + degMinutes + 'deg); -o-transform: rotate(' + degMinutes + 'deg); transform: rotate(' + degMinutes + 'deg);');
20
    clockHours.setAttribute('style', '-webkit-transform: rotate(' + degHours + 'deg); -moz-transform: rotate(' + degHours + 'deg); -ms-transform: rotate(' + degHours + 'deg); -o-transform: rotate(' + degHours + 'deg); transform: rotate(' + degHours + 'deg);');
21
  }
22
 
23
  setInterval(getTime, 1000);
24
  getTime();
25
 
26
} ());
 

Clock App Icon

CSSDeck G+