Pie Chart-like Circular Timer With jQuery And SVG - polartimer.js

File Size: 4.62 KB
Views Total: 5457
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Pie Chart-like Circular Timer With jQuery And SVG - polartimer.js

polartimer.js is a jQuery countdown timer plugin which draws an animated, configurable, SVG based circle to represent the remaining time.

How to use it:

1. Load the necessary jQuery library and a SVG library of your choice in the html file.

<!-- jQuery -->
<script src="/path/to/jquery.min.js"></script>
<!-- snap.svg -->
<script src="/path/to/snap.svg-min.js"></script>
<!-- OR Raphael.js -->
<script src="/path/to/raphael.min.js"></script>

2. Download and include the script jquery.polartimer.js after them.

<script src="jquery.polartimer.js"></script>

3. Create an empty container in which you want to place the countdown timer.

<div id="myTimer"></div>

4. Create the timer and specify the time you want to countdown from.

$('#myTimer').polartimer({
  timerSeconds: 6
});

5. Start the timer.

$('#demoTimer').polartimer('start');

6. Modify the background color and opacity of the timer.

$('#myTimer').polartimer({
  timerSeconds: 6,
  color : '#CCC',
  opacity : 1
});

7. Trigger a callback function when the timer is complete.

$('#myTimer').polartimer({
  timerSeconds: 6,
  callback : function() {}
});

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