<!doctype>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script src='http://omnipotent.net/jquery.sparkline/1.6/jquery.sparkline.min.js'></script>
<script type="text/javascript">
$(function() {
setInterval(function() {
var t = new Date();
var h = t.getHours() % 12;
$('#ID_H').sparkline([h,12-h], {type:'pie', sliceColors:['#900','#ccc'], offset:-90, width:100, height:100} );
var m = t.getMinutes();
$('#ID_M').sparkline([m,60-m], {type:'pie', sliceColors:['#090','#ccc'], offset:-90, width:100, height:100} );
var s = t.getSeconds();
$('#ID_S').sparkline([s,60-s], {type:'pie', sliceColors:['#009','#ccc'], offset:-90, width:100, height:100} );
}, 1000);
});
</script>
</head>
<body>
<p style="text-align:center;">
<span id="ID_H"></span>
<span id="ID_M"></span>
<span id="ID_S"></span>
</p>
</body>
</html>
