SVG Based Circular Timer Plugin For jQuery - Circle Timer

SVG Based Circular Timer Plugin For jQuery - Circle Timer
File Size: 11.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.