Lightweight jQuery plugin to display nice dynamic clock with the HTML5 canvas element.

View the Project on Github


BandClock is a jQuery plugin that uses the canvas element to dynamic circular bandClock. This clock is highly customizable, very easy to implement.

Browser support

This plugin supports all major browsers that support the canvas element. With excanvas you can even render the clock on IE 7+8.

Get started

To use the bandClock plugin you need to load the current version of jQuery and the source script (js) file of the plugin.

Then just add the following lines to head in to your website.

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="/path/to/bandClock.js"></script>

Now just add then element in your website to represent clock.

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

Finally you have to initialize the plugin with your desired configuration:

<script type="text/javascript">
$(function() {
//your configuration goes here
}); </script>

Configuration Properties

You can pass a set of these options to the initialize function to set a custom behaviour and look for the plugin.

Property Default Description
size 300 Size of the clock in px. It will always be in a .
color #18FFFF The color of circular band of clock. You can either pass a valid css color string.
bgColor #212121 The background color for disable rendering.
lineWidth 10 Thickness of circular band line in px.
lineCap butt defines how the edge of the band line looks like,. posible values are : butt, round and square
gap 5 Distance between band line of hours, minutes, seconds in px.
fontStyle 20 Verdana Defines font-size and font-family of the center time display

version release 1.0