Circular Pie-Style Countdown Timer Plugin with jQuery - Pietimer

Circular Pie-Style Countdown Timer Plugin with jQuery - Pietimer
File Size: 6.87 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

See also:

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.