jQuery and CSS3 Realistic Analog Clock Widget by Codehim

Codehim Clock is a well designed, adjustable and fully realistic jQuery and CSS3 based analog clock widget.

Written in: HTML5, CSS3 and JavaScript
Framework: jQuery 3.3.1

Fork on GiHub Download

Codehim Clock Example

Main Features

How to Use

1. Load "Codehim Clock jQuery Plugin" and CSS file into your website/app.

<!--Codehim Clock JS-->
<script src="js/jquery.codehim.clock.js"></script>

   <!--Codehim Clock CSS-->
<link rel="stylesheet" href="css/codehim-clock.css" />

2. After this, you have to do nothing tough to get it working. Just create a container in which you want to adjust this analog clock widget. You can use it anywhere (i.e on sidebar, bottom or something else) in your website/app.

For example, you have create the following div element with class name clock-place .

<div class="clock-place"> </div>

Now, call the CodehimClock() with this selector in DOM ready function.




Note: Codehim Clock will automatically generate everything (i.e clock dale, clock's hands, numbers, what's time right now etc.) in HTML document, so you have to do nothing for creating clock interface.

We provide classes for customization of each element of the clock. So, you can fully customize it according to your needs.

Codehim Clock Options

The following are some plugin's options for customization purpose.

To change the clock widget size, use the following possible class name in string option:


   clockSize: "original", 


To hide clock second's hand, update the following option.

 showSeconds: true, //false to hide seconds hand

Decide whether to show date and day in clock. default is true.

 showDate: true, //false to hide date and day