An SVG-based jQuery and Zepto circular timer plugin.
Fork this repository or download the circletimer.min.js
and circle.css
files from the dist
directory of this project.
- 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-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);
});
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.
- 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.
This code is released under the MIT License