Create Analog Clock With jQuery And CSS3 – jsRapClock Plugin

Today I am going to share awesome jQuery and CSS3 based jQuery plugin which help you to display an simple and beautiful analog clock on your website. jQuery jsRapClock is a simple, lightweight jQuery clock plugin which makes it easy to render a responsive Analog Clock on the web application using CSS3 2D transforms without canvas and SVG.
analog-clock-jquery


Libraries

Load the plugin’s CSS and JS library with jQuery core library.

<link rel="stylesheet" href="jsRapClock.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jsRapClock.js"></script>

HTML

Create a simple DIV container where you want to render the analog clock.

<div id="clock" ></div>



JS

$(function(){
  $('#clock').jsRapClock();
});

Use following option to customize analog clock.

$('#clock').jsRapClock({
	caption:'London',
	shiftH:1,
	shiftM:30
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by Thibor. Visit their official github repository for more information and follow for future updates.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.