September 22, 2022

Simple Attractive Circular 360 Degree Countdown Timer | countdown360

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

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


See Demo And Download

Official Website(johnschult): Click Here

This superior jQuery/javascript plugin is developed by johnschult. For extra Advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.