jQuery countdown360
A simple countdown timer in seconds
This plugin provides a simple circular countdown timer with customizable settings.
Basic Usage
-
Include jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
-
Include plugin's code:
<script src="dist/jquery.countdown360.min.js"></script>
-
Include the plugin container in your HTML:
<div id="countdown"></div>- Call the plugin:
$("#countdown").countdown360({ radius : 60.5, seconds : 5, strokeWidth : 15, fillStyle : '#0276FD', strokeStyle : '#003F87', fontSize : 50, fontColor : '#FFFFFF', autostart: false, onComplete : function () { console.log('completed') } }).start()Default Options
{ radius: 15.5, // radius of arc strokeStyle: "#477050", // the color of the stroke strokeWidth: undefined, // the stroke width, dynamically calulated if omitted in options fillStyle: "#8ac575", // the fill color fontColor: "#477050", // the font color fontFamily: "sans-serif", // the font family fontSize: undefined, // the font size, dynamically calulated if omitted in options fontWeight: 700, // the font weight autostart: true, // start the countdown automatically seconds: 10, // the number of seconds to count down label: ["second", "seconds"], // the label to use or false if none, first is singular form, second is plural startOverAfterAdding: true, // Start the timer over after time is added with addSeconds smooth: false, // update the ticks every 16ms when true onComplete: function () {} }Functions
.start() // starts the countdown timer .stop() // stops the countdown timer, onComplete is not called .extendTimer(secs) // extends the current timer by backing up by the number of seconds provided .addSeconds(secs) // adds additional seconds to the original timer and restarts if startOverAfterAdding is true Callbacks
onComplete // The function defined in this option is called after the timer completes. Contributing
License
MIT License © John Schult
