Simple jQuery & Html5 Based 360 Degree Countdown Timer - countdown360
File Size: | 14.4 KB |
---|---|
Views Total: | 34057 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

countdown360 is a simple nice jQuery countdown timer plugin that allows you to count down to a number of seconds as a circular progress bar.
It is fully customizable via optional settings and has onComplete callback support.
The plugin is powered by jQuery and Html5 canvas
element so it can work on most modern browsers without writing any CSS.
See also:
- Attractive jQuery Circular Countdown Timer Plugin - TimeCircles
- Colorful Circular Clock with Jquery and CSS
How to use it:
1. Include the countdown360 plugin after loading the latest jQuery JavaScript library.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/dist/jquery.countdown360.min.js"></script>
2. Create a container element to render a circular countdown timer.
<div id="countdown"></div>
3. Set a number of seconds you would like to count down to and customize the countdown timer in the javascript.
var countdown = $("#countdown").countdown360({ radius : 60, seconds : 100, fontColor : '#FFFFFF', autostart : false, onComplete : function () { console.log('done') } });
4. Start the countdown timer.
countdown.start();
5. All default options to customize the countdown timer.
- 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
- startOverAfterAdding: true, - start the timer over after time is added with addSeconds
- smooth: false, - should the timer be smooth or stepping
- onComplete: undefined - callback
var countdown = $("#countdown").countdown360({ radius: 15.5, strokeStyle: "#477050", strokeWidth: undefined, fillStyle: "#8ac575", fontColor: "#477050", fontFamily: "sans-serif", fontSize: undefined, fontWeight: 700, autostart: true, seconds: 10, label: ["second", "seconds"], startOverAfterAdding: true, smooth: false, onComplete: function () {} });
6. API methods.
// start the countdown countdown.start(); // stop the countdown countdown.stop(); // extends the current timer by backing up by the number of seconds provided countdown.extendTimer(secs); // adds additional seconds to the original timer and restarts if startOverAfterAdding is true countdown.addSeconds(secs);
Changelog:
2021-09-12
- Doc updated
v0.1.9 (2016-04-14)
- bugfix
v0.1.8 (2015-07-08)
- combined timeRemaining statement into one line getTimeRemaining
v0.1.7 (2015-03-03)
- bugfix.
v0.1.3 (2014-05-27)
- Added support for ARIA
This awesome jQuery plugin is developed by johnschult. For more Advanced Usages, please check the demo page or visit the official website.