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

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


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.

Related Posts

vuejs-dialog-plugin

Vuejs Lightweight Prompt Based On Promise And Confirm Dialog

VUEJS DIALOG PLUGIN is a lightweight, promise-based, prompt, and dialog-based alert. Important updates The dialog will always be resolved by an object. (ie a callback to continue…

Lightweight-Flexbox-Carousel-Plugin

Simple and Lightweight Flexbox Carousel Plugin With JavaScript | flexCarousel.js

Flexbox Responsive Slider – flexCarousel.js plugin is a simple and lightweight plug-in from Flexbox carousel ES6 JavaScript. An unofficial fork by Slick Carousel. Flex Carousel is a…

bootstrap-5-multi-level-dropdown

Multi-Level Dropdown Works With Bootstrap 5

Bootstrap 5 Multi-Level Dropdown, using the official HTML without adding additional CSS styles and classes, it’s just like the original support. Not all of the things listed…

jquery-confirmation-dialog

JQuery UI Built Dynamic Modal That Uses Bootstrap | confirm.js

confirm.js is to use confirm modal created using JQuery and Bootstrap. Put events in each custom button in your web application. Easy to implement, saves time. Requirements…

bootstrap-responsive-navbar

[Bootstrap 5] Responsive Navbar With off-canvas Display on Mobile

The Bootstrap 5-off-canvas navigation menu is a responsive navigation system that combines BS5 components outside of the canvas and navbar. Must Read: Pure CSS Mobile-friendly Responsive Table…

Extract-The-Dominant-Color-From-Image

Extract The Dominant Color From Image | jquery.primarycolor.js

Primary Color jQuery plugin that gets the base color of an image. A callback event that lets you apply RGB coloring to any HTML element is supported….