BandClock
Lightweight plugin to render simple, retina optimized dynamic clock
Freature
- Highly customizable
- Very easy to you
- Works in all modern browsers
Framework support
- jQuery plugin (~921 bytes)
Get Started
To use the band clock plugin you need to load the current version of jQuery (> 1.6.4)
##Install with Bower You can also install and manage BandClock using Bower:
$ bower install bandClock<div class="clock"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="/path/to/bandClock.js"></script> <script> $(function () { $(.clock).bandClock({ // your options goes here }); }) </script>Options
You can pass these options to set a custom look and feel 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 |
Test
To run the test just use the karma adapter of grunt: grunt test
Browser Support
Native support
- Chrome
- Safari
- FireFox
- Opera
- Internet Explorer 9+
Copyright
Copyright (c) 2015 Nitin Jha, contributors. Released under the MIT, GPL licenses.
