https://github.com/lasverg/bandclock

Lightweight jQuery plugin to render simple, retina optimized dynamic clock
https://github.com/lasverg/bandclock

bower canvas clock jquery jquery-plugin lightweight-plugin

Last synced: 12 days ago
JSON representation

Lightweight jQuery plugin to render simple, retina optimized dynamic clock

• Host: GitHub
• URL: https://github.com/lasverg/bandclock
• Owner: lasverg
• Created: 2015-05-05T08:00:42.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2017-02-10T16:25:57.000Z (almost 9 years ago)
• Last Synced: 2025-10-22T09:41:44.505Z (2 months ago)
• Topics: bower, canvas, clock, jquery, jquery-plugin, lightweight-plugin
• Language: JavaScript
• Homepage: http://lasverg.github.io/bandClock
• Size: 456 KB
• Stars: 2
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

          
# BandClock

> Lightweight plugin to render simple, retina optimized dynamic clock

## Freature

![](https://raw.githubusercontent.com/zaniitiin/bandClock/master/example/demo.png)

* 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:

```html

$ bower install bandClock

```

```html



  $(function () {

    $(.clock).bandClock({

      // your options goes here

    });

  })

```

## 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.