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

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.