SVG Based Circular Timer Plugin For jQuery - Circle Timer

Circle Timer is a very lightweight jQuery plugin that lets you create a SVG-based circular pie-style countdown timer and triggers a custom callback function once the timer is complete.

See also:

• Graphical and Circular Timer with jQuery and CSS3 - pietimer
• Circular Pie-Style Countdown Timer Plugin with jQuery - Pietimer

How to use it:

1. Add references to jQuery library, circletimer.min.js and circletimer.css in your document.

<script src="jquery.min.js"></script>
<script src="dist/circletimer.min.js"></script>
<link href="dist/circletimer.css" rel="stylesheet">

2. Create the html elements for the countdown timer.

<div id="example-timer"></div>
<p>Time Elapsed: <span id="time-elapsed">0</span>ms</p>

3. Create controls to start, stop, pause, resume the countdown timer.

<button id="start">Start</button>
<button id="pause">Pause</button>
<button id="stop">Stop</button>

4. Initialize the countdown timer and enable the controls.

$(document).on("ready", function() {
  $("#example-timer").circletimer({
    onComplete: function() {
      alert("Time is up!");
    },
    onUpdate: function(elapsed) {
      $("#time-elapsed").html(Math.round(elapsed));
    },
    timeout: 5000
  });

  $("#start").on("click", function() {
    $("#example-timer").circletimer("start");
  });

  $("#pause").on("click", function() {
    $("#example-timer").circletimer("pause");
  });

  $("#stop").on("click", function() {
    $("#example-timer").circletimer("stop");
  });
})

4. Default options.

$("#example-timer").circletimer({

  // timeout
  timeout: 5000,

  // callbacks
  onComplete: (function() {}),
  onUpdate: (function() {})
  
});

Change log:

2015-12-12

• v1.0.0

2015-08-22

• Add option to increase time while timer is going

---

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