Minimal Countdown Timer With Optional Controls

A simple, plain, jQuery based countdown plugin which enables you to start, pause, reset a timer inside any HTML element.

How to use it:

1. Create a container to hold the countdown timer and specify the time from which you want to countdown in the data-minutes-left attribute. 1.02 means that the timer will countdown from 00:01:01.

<div class="timer timer-example" data-minutes-left="1.02"></div>

2. Initialize the countdown timer.

var myTimer = $('.timer-example').startTimer();

3. Start the countdown timer.

myTimer.trigger('start');

4. Create custom controls to play, pause, reset the countdown timer.

<div id="controls">
  <div class="timerstart">Start</div>
  <div class="timerpause">Pause</div>
  <div class="timerreset">Reset</div>
</div>

var myTimer = $('.timer-example').startTimer({
    onPause: $('.timerpause'),
    onReset: $('.timerreset'),
    onStart: $('.timerstart')
});

5. Execute a function when the countdown is completely finished.

var myTimer = $('.timer-example').startTimer({
    onComplete: function(element){
      // do something
    }
});

6. Auto restart the countdown timer after finished.

var myTimer = $('.timer-example').startTimer({
    loop: true,
    loopInterval: 2
});

7. More API methods to control the countdown timer programmatically.

// pause the countdown timer
myTimer.trigger('pause'); 

// reset the countdown timer
myTimer.trigger('resetime');

---

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