Simple jQuery & Html5 Based 360 Degree Countdown Timer - countdown360

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

countdown360 is a simple nice jQuery countdown timer plugin which 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:

How to use it:

1. Include the latest version of jQuery javascript library on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="src/jquery.countdown360.js" type="text/javascript" charset="utf-8"></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.

<script type="text/javascript" charset="utf-8">
$("#countdown").countdown360({
radius      : 60,
seconds     : 100,
fontColor   : '#FFFFFF',
autostart   : false,
onComplete  : function () { console.log('done') }
}).start()
</script>

4. All the available settings with default values.

  • 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
  • onComplete: undefined - callback

Change logs:

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.