Ajax Loader
HTML 
<div id="clock">
1
<div id="clock">
2
  <span class="hand second"></span>
3
  <span class="hand minute"></span>
4
  <span class="hand hour"></span>
5
</div>
 
CSS 
body {
1
body {
2
  margin: 0;
3
  padding: 0;
4
  background: #ddd;
5
}
6
 
7
#clock {
8
  position: relative;
9
  width: 120px;
10
  height: 120px;
11
  background: #fff;
12
  margin: 20px auto 0;
13
  border: 6px solid #333;
14
15
  -moz-border-radius: 50%;
16
  -webkit-border-radius: 50%;
17
  border-radius: 50%;
18
}
19
 
20
#clock:after {
21
  content: '';
22
  position: absolute;
23
  bottom: -7px;
24
  width: 120px;
25
  left: 0;
26
  height: 0px;
27
28
  -moz-border-radius: 50%;
29
  -webkit-border-radius: 50%;
30
  border-radius: 50%;
31
32
  -webkit-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.8);
33
  -moz-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.8);
34
  box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.8);
35
36
  z-index: -1;
37
}
38
 
39
#clock:before {
40
  content: '';
41
  position: absolute;
42
  z-index: 2;
43
  width: 8px;
44
  height: 8px;
45
  background: #333;
46
  left: 50%;
47
  top: 50%;
48
  margin: -4px 0 0 -4px;
49
50
  -moz-border-radius: 50%;
51
  -webkit-border-radius: 50%;
52
  border-radius: 50%;
53
}
54
 
55
/* Hands */
56
#clock span.hand {
57
  background: #333;
58
  position: absolute;
59
  left: 50%;
60
  -webkit-animation: rotate 60s infinite linear;
61
  -webkit-transform-origin: left bottom;
62
  -moz-animation: rotate 60s infinite linear;
63
  -moz-transform-origin: left bottom;
64
  -ms-animation: rotate 60s infinite linear;
65
  -ms-transform-origin: left bottom;
66
  -o-animation: rotate 60s infinite linear;
67
  -o-transform-origin: left bottom;
68
  animation: rotate 60s infinite linear;
69
  transform-origin: left bottom;
70
}
71
 
72
#clock span.hand.second {
73
  height: 50px;
74
  width: 2px;
75
  margin-left: -1px;
76
  top: 10px;
77
}
78
 
79
#clock span.hand.minute {
80
  height: 40px;
81
  width: 4px;
82
  margin-left: -2px;
83
  top: 20px;
84
  -webkit-animation-duration: 3600s;
85
  -moz-animation-duration: 3600s;
86
  -ms-animation-duration: 3600s;
87
  -o-animation-duration: 3600s;
88
  animation-duration: 3600s;
89
}
90
 
91
#clock span.hand.hour {
92
  height: 30px;
93
  width: 6px;
94
  margin-left: -3px;
95
  top: 30px;
96
  -webkit-animation-duration: 84600s;
97
  -moz-animation-duration: 84600s;
98
  -ms-animation-duration: 84600s;
99
  -o-animation-duration: 84600s;
100
  animation-duration: 84600s;
101
}
102
 
103
@-webkit-keyframes rotate {
104
  0% { -webkit-transform: rotate(0deg);}
105
  100% { -webkit-transform: rotate(360deg);}
106
}
107
 
108
@-moz-keyframes rotate {
109
  0% { -moz-transform: rotate(0deg);}
110
  100% { -moz-transform: rotate(360deg);}
111
}
112
 
113
@-ms-keyframes rotate {
114
  0% { -ms-transform: rotate(0deg);}
115
  100% { -ms-transform: rotate(360deg);}
116
}
117
 
118
@-o-keyframes rotate {
119
  0% { -o-transform: rotate(0deg);}
120
  100% { -o-transform: rotate(360deg);}
121
}
122
 
123
@keyframes rotate {
124
  0% { transform: rotate(0deg);}
125
  100% { transform: rotate(360deg);}
126
}
 

Pure CSS3 Clock

CSSDeck G+