Circle Timer
An SVG-based jQuery and Zepto circular timer plugin.
How to use
Fork this repository or download the circletimer.min.js
and circle.css
files from the dist
directory of this project.
Options
- timeout (number): the time that the timer should count for, in milleseconds. The default value is
5000
- onComplete (function): the callback to be executed when the time has run out. The default value is an empty function
- onUpdate (function): the callback to be executed each update of the timer. The default value is an empty function
- clockwise (boolean): whether or not the timer should be going clockwise. If set to false, the timer moves counterclockwise. The default value is
true
Example Code
$("#example-timer").circletimer({ onComplete: function() { alert("Time is up!"); }, onUpdate: function(elapsed) { $("#time-elapsed").html(Math.round(elapsed)); }, timeout: 5000 }); $("#start").on("click", function() { $("#example-timer").circletimer("start"); }); $("#pause").on("click", function() { $("#example-timer").circletimer("pause"); }); $("#stop").on("click", function() { $("#example-timer").circletimer("stop"); }); $("#add").on("click", function() { $("#example-timer").circletimer("add", 1000); });
Contributing
This plugin is written in CoffeeScript and is compiled to JS using a Grunt task. Commenting of functions in the CoffeeScript is done using the Codo syntax.
Steps to contribute:
- Fork the repository
- Install the Codo NPM module globally using
npm install -g codo
- Install the rest of the NPM modules required by executing
npm install
from the root of the repo - Make your desired changes in
src/circletimer.coffee
andsrc/circletimer.scss
- Compile your changes to JS by executing
grunt
from the root of the repo - Check out if they work by serving the
index.html
file in the root of the directory using your new change - If it works, create a pull request with the new change!
- Pat yourself on the back and reward yourself with a candy bar! Mmmmm, candy.
License
This code is released under the MIT License