Create a Analog Clock using css & jquery

We can create a live analog clock using css and jquery. Create it without any plugins. This analog clock requires css3 transform property, so don’t expect this to work on older ie versions.

Analog Clock Demo

Demo

How to?

Use the below html markup and include style and script. then initiate the analog clock using `analogclock.run();` as written on the html markup. ``` Live Analog Clock using CSS and jQuery
``` ``` .clock-circle { width: 180px; height: 180px; margin: 0 auto; position: relative; border: 8px solid #fff; border-radius: 50%; -webkit-box-shadow: 0 1px 8px rgba(34, 34, 34, 0.3),inset 0 1px 8px rgba(34, 34, 34, 0.3); box-shadow: 0 1px 8px rgba(34, 34, 34, 0.3),inset 0 1px 8px rgba(34, 34, 34, 0.3); background: #4527A0; } .clock-face { width: 100%; height: 100%; } .clock-hour{ width:0; height:0; position:absolute; top:50%; left:50%; margin:-4px 0 -4px -25%; padding:4px 0 4px 25%; background:#fff; -webkit-transform-origin:100% 50%; -ms-transform-origin:100% 50%; transform-origin:100% 50%; border-radius:4px 0 0 4px; } .clock-minute{ width:0; height:0; position:absolute; top:50%; left:50%; margin:-40% -3px 0; padding:40% 3px 0; background:#fff; -webkit-transform-origin:50% 100%; -ms-transform-origin:50% 100%; transform-origin:50% 100%; border-radius:3px 3px 0 0; } .clock-second{ width:0; height:0; position:absolute; top:50%; left:50%; margin:-40% -1px 0 0; padding:40% 1px 0; background:#fff; -webkit-transform-origin:50% 100%; -ms-transform-origin:50% 100%; transform-origin:50% 100%; } .clock-face:after { position:absolute; top:50%; left:50%; width:12px; height:12px; margin:-6px 0 0 -6px; background:#fff; border-radius:6px; content:""; display:block; } ``` ``` function analogClock(){ } analogClock.prototype.run = function() { var date = new Date(); var second = date.getSeconds()* 6; var minute = date.getMinutes()* 6 + second / 60; var hour = ((date.getHours() % 12) / 12) * 360 + 90 + minute / 12; jQuery('#hour').css("transform", "rotate(" + hour + "deg)"); jQuery('#minute').css("transform", "rotate(" + minute + "deg)"); jQuery('#second').css("transform", "rotate(" + second + "deg)"); }; ```

Analog Clock Demo

Demo