Circular Pie-Style Countdown Timer Plugin with jQuery - Pietimer

Pietimer is a minimal, lightweight jQuery plugin for creating a circular, Html5 Canvas based pie timer with onComplete callback support.

See also:

• Graphical and Circular Timer with jQuery and CSS3 - pietimer

How to use it:

1. Add jQuery library and the jQuery Pietimer plugin to the webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.pietimer.js"></script>

2. Create an element that will be served as a container for the pie timer.

<div id="demo"></div>

3. Config the pie timer.

$('#demo').pietimer({

  // countdown from
  seconds: 10,

  // color of the pie timer
  color: 'rgba(255, 255, 255, 0.8)',

  // width / height of the pie timer
  height: 100,
  width: 100,

  // is reversed?
  is_reversed: true

},

4. Start the pie timer.

$('#demo').pietimer('start');

5. Pause the pie timer.

$('#demo').pietimer('pause');

6. Excute a callback function as the pie timer is complete.

$('#demo').pietimer({
  // options here
},
function(){
  // do something
});

---

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