Pixels polished jQuery & CSS3 analogue clock

Je voulais partager mon nouveau plugin jQuery d’horloge analogique. C’est un script léger, sans image, et uniquement basé sur CSS3 et jQuery.
J’ai essayé d’écrire un code compatible sur les différents navigateurs et c’est commenté… Merci à cet article “quick-look-math-animations-javascript” et d’autres, pour l’inspiration…


La petite démo est ici : http://jsfiddle.net/molokoloco/ajcRz/

La grosse démo (V2) est ici : http://jsfiddle.net/molokoloco/V2rFN/ [Edited]



I want to share my new jQuery analogue clock plug-in.
This is à lightweight code, with no images, and only powered with jQuery and CSS3.
I’ve intended to write a annotated cross-browser -past and futur-proof CSS3 code and a simple as possible jQuery extend… Thank to this article “quick-look-math-animations-javascript” and others, for the inspiration…


You can watch the demo here : http://jsfiddle.net/molokoloco/ajcRz/

Demo V2 : http://jsfiddle.net/molokoloco/V2rFN/ [Edited]


GitHub sources :


  • Benoit Adam

    A very nice job indeed!
    As I needed to present different clocks with different time zones on the same page, here’s what I did:
    – add a “timeZone” option that defaults to 0 in the options of analogClock function,
    – adds this value to var “hours” in function “timer”: now.getHours() + options.timeZone;

    And then you just initialize like this: $(‘div#clock’).analogueClock({timeZone:3});

    Hope this helps