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.

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.

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.

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

Related