Simple jQuery & Html5 Based 360 Degree Countdown Timer - countdown360

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.