Ajax Loader
HTML 
<div>12:45:25</div>
1
<div>12:45:25</div>
2
 
3
<!--
4
Thanks for watching!!
5
-->
 
CSS 
/* Styling it all now! */
1
/* Styling it all now! */
2
 
3
@font-face {
4
  font-family: 'digi';
5
  src: url('http://cssdeck.com/uploads/resources/fonts/digii/DS-DIGII.TTF');
6
}
7
 
8
* {
9
  box-sizing: border-box;
10
}
11
 
12
html, body {
13
  width: 100%; height: 100%;
14
}
15
 
16
body {
17
  font-family: 'digi';
18
  font-size: 76%;
19
  background: #B9B7B1;
20
  background-image: radial-gradient(
21
    center 0,
22
    white,
23
    #B9B7B1
24
  );
25
}
26
 
27
div {
28
  width: 250px; height: 100px;
29
  background: white;
30
  font-size: 4em;
31
  color: #707070;
32
33
  /* Centering everything */
34
  position: absolute;
35
  left: 50%; top: 50%;
36
  margin-left: -125px; margin-top: -50px;
37
38
  text-align: center;
39
  line-height: 100px;
40
41
  border-top: 5px solid #E54B6B;
42
  background-image: linear-gradient(#f0f0f0, white);
43
}
44
 
45
 
46
 
47
 
48
 
49
 
50
 
51
 
52
 
53
 
54
 
55
 
56
 
57
 
58
 
59
 
60
 
61
 
62
 
 
JavaScript 
// Interactiveness now
1
// Interactiveness now
2
 
3
(function() {
4
 
5
  var clock = document.querySelector('div');
6
7
  // But there is a little problem
8
  // we need to pad 0-9 with an extra
9
  // 0 on the left for hours, seconds, minutes
10
11
  var pad = function(x) {
12
    return x < 10 ? '0'+x : x;
13
  };
14
15
  var ticktock = function() {
16
    var d = new Date();
17
18
    var h = pad( d.getHours() );
19
    var m = pad( d.getMinutes() );
20
    var s = pad( d.getSeconds() );
21
22
    var current_time = [h,m,s].join(':');
23
24
    clock.innerHTML = current_time;
25
26
  };
27
28
  ticktock();
29
30
  // Calling ticktock() every 1 second
31
  setInterval(ticktock, 1000);
32
33
34
35
36
37
 
38
}());
 

Minimal CSS3 Digital Clock

CSSDeck G+