Attractive jQuery Circular Countdown Timer Plugin - TimeCircles

TimeCircles is a simple yet attractive jQuery plugin for creating a countdown or count up timer with cool looking circular design.

Features:

• Counts down in seconds, minutes, hours and days to any date.
• Count up from a certain time.
• Animated progress bar to display the remaining time.
• Easy to customize via a set of options.
• Supports start, stop and destroy methods.
• Callbacks supported.

Basic Usage:

1. Load the required jQuery TimeCircles stylesheet file on your web page.

<link rel="stylesheet" href="inc/TimeCircles.css" />

2. Create a container for a countdown time. Set the reference time in yyyy-mm-dd hh:mm:ss format using data-date attribute.

<div class="demo" data-date="2013-12-25 00:00:00"></div>

3. Load the jQuery javascript library and jQuery TimeCircles plugin at the bottom of your web page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="inc/TimeCircles.js"></script> 

4. Call the plugin and you're done.

$(".demo").TimeCircles();

5. Available options.

start: true, // determines whether or not TimeCircles should start immediately.
animation: "smooth", // smooth or ticks. The way the circles animate can be either a constant gradual rotating, slowly moving from one second to the other. 
count_past_zero: true, // This option is only really useful for when counting down. What it does is either give you the option to stop the timer, or start counting up after you've hit the predefined date (or your stopwatch hits zero).
circle_bg_color: "#60686F", // determines the color of the background circle.
use_background: true, // sets whether any background circle should be drawn at all. 
fg_width: 0.1, //  sets the width of the foreground circle. 
bg_width: 1.2, // sets the width of the backgroundground circle. 
text_size: 0.07, // This option sets the font size of the text in the circles. 
total_duration: "Auto", // This option can be set to change how much time will fill the largest visible circle.
direction: "Clockwise", // "Clockwise", "Counter-clockwise" or "Both".
use_top_frame: false,
start_angle: 0, // This option can be set to change the starting point from which the circles will fill up. 
time: { //  a group of options that allows you to control the options of each time unit independently.
Days: {
show: true,
text: "Days",
color: "#FC6"
},
Hours: {
show: true,
text: "Hours",
color: "#9CF"
},
Minutes: {
show: true,
text: "Minutes",
color: "#BFB"
},
Seconds: {
show: true,
text: "Seconds",
color: "#F99"
}
}

Change log:

2016-05-07

• Independent control of text and number size
• Update TimeCircles.css

2015-12-13

• Changing the function hexToRgb()

v1.5.3 (2014-07-27)

• Increased fallback call frequency to avoid skipping seconds and to put them at more accurate points
• Made a fix that was causing TimeCircles to not work in cross-domain iframes

v1.5.2 (2014-07-08)

• Added fallback to requestAnimationFrame to make sure that listeners are stil triggered when looking at another tab.

v1.5.1 (2014-07-08)

• update.

v1.4.0 (2014-05-22)

• Added support for explorercanvas

v1.3.2 (2014-04-22)

• Fixed bug with cancelAnimationFrame not getting vendor specific prefix, and only not checking if cancelAnimationFrame existed alongside requestAnimationFrame.

v1.3.1 (2014-02-17)

• Fixed bug where .start() would restart a timer instead.

v1.3.0 (2014-02-16)

• Make use of requestAnimationFrame.

v1.2.1 (2014-02-13)

• Did not work at all on IE8 because of missing Canvas support. Now detects when canvas support is missing, and shows only the text.
• The "total_duration": "Auto" setting was only being loaded and parsed once. Now it is re-parsed each time setOptions is called on the inner class. This results in TimeCircles working more as expected when changing settings at a later time.

v1.2.0 (2014-02-08)

• version update.

v1.1.4 (2014-02-05)

• version update.

v1.1.3 (2014-01-30)

• version update.

v1.0.3 (2014-01-21)

• Fixed a bug in .destroy() function.

v1.0.2 (2014-01-06)

• Properly implemented time.Days.show

v1.0.1 (2013-12-26)

• Properly implemented time.Days.show

---

This awesome jQuery plugin is developed by wimbarelds. For more Advanced Usages, please check the demo page or visit the official website.