Simple Attractive Circular 360 Degree Countdown Timer Plugin

jQuery360 Countdown Timer is a timer that counts down in seconds. This plugin provides a simple circular countdown timer with customizable settings. It is fully customizable via optional settings and has full callback support.

The plugin is powered by the jQuery and Html5 canvas element so it can work on most modern browsers without writing any CSS.

simple countdown timer jquery, jquery countdown timer seconds, jquery countdown timer for online, jquery countdown timer plugin, modern countdown timer

Simple Countdown Timer App In jQuery

How to make use of it:

1. Include the countdown360 plugin after loading the latest jQuery JS 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 present a countdown carousel.

<div id="countdown"></div>

3. Set the number of seconds you want to count down and customize the countdown timer in JavaScript.

var countdown = $("#countdown").countdown360({
    radius      : 60,
    seconds     : 100,
    fontColor   : '#FFFFFF',
    autostart   : false,
    onComplete  : function () { console.log('done') }
});

4. The countdown begins.

countdown.start();

5. All default options to customize the countdown.

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);

Simple jQuery & Html5 Based 360 Degree Countdown Timer, jQuery countdown360 Plugin/Github, jquery countdown cdn, jquery timer plugin, circular countdown timer