This plugin provides a simple circular countdown timer with customizable settings.
-
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(){
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
clockwise: false, // direction of rotation of the timer
onComplete: function () {}
}.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
onComplete // The function defined in this option is called after the timer completes.
MIT License © John Schult