jQuery timer (SVG based) with 2 online examples

The jQuery SVG based timer

This jQuery timer which is circular and based on SVG can be integrated easily into your website. You simply need to set a few options in the jQuery code after setting up the plug-in file.

For example, the duration of the timer (timeout) to be set in milliseconds. You may also perform a certain action as the time is up, for example showing an alert stating that “Time is up”.

As this is a circular timer, you may specify the direction of circulation i.e. clockwise or anti-clockwise. I will show you the demos of both with different duration and how to use the onComplete option as well.

A demo of clockwise circular timer

In this example of the jQuery timer, as you press the “Start” button, the timer will start. The duration is set as ten seconds i.e. 10000 milliseconds. The default value of the clockwise option is true. Even if you do not specify the direction, it will run clockwise. I have set it as true for the demo.

jQuery timer

See online demo and code

For setting up this simple and nice circular timer, first, download the plug-in from GitHub website here. Include the jQuery and plugin JS file along with highlight.min.js in the <head> section:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script>

<script src=”js/circletimer/circletimer.min.js”></script>

<script src=”http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js”></script>

<link href=”css/circletimer/circletimer.css” rel=”stylesheet”>

Set the path according to your specifications. (You may also download the plug-in JS file by view source the demo page).

The markup section includes the space for circular timer and buttons:

 

   <div class="example">

      <div id="jquery-timer-demo"></div>

      <p>Time Elapsed: <span id="counter-time">0</span>ms</p>

      <button id="btn-start">Start</button>

      <button id="btn-pause">Pause</button>

      <button id="btn-stop">Stop</button>

      <button id="btn-add">Add 1s</button>

    </div>

 

The script where you may specify duration, direction and button actions:

 

   <script>

      $(document).on("ready", function() {

        $("#jquery-timer-demo").circletimer({

          onComplete: function() {

            alert("Your time of 10 seconds is up!");

          },

          onUpdate: function(elapsed) {

            $("#counter-time").html(Math.round(elapsed));

          },

          clockwise: true,

          timeout: 10000

        });

        $("#btn-start").on("click", function() {

          $("#jquery-timer-demo").circletimer("start");

        });

        $("#btn-pause").on("click", function() {

          $("#jquery-timer-demo").circletimer("pause");

        });

        $("#btn-stop").on("click", function() {

          $("#jquery-timer-demo").circletimer("stop");

        });

        $("#btn-add").on("click", function() {

          $("#jquery-timer-demo").circletimer("add", 1000);

        });

      })

    </script>

 

Get the complete code including CSS in the <style> section from the demo page’s code part.

A demo of anticlockwise timer with Bootstrap buttons and icons

In this demo, the circle is moving anticlockwise while I have used the Bootstrap buttons with glyph icons to start, stop, and pause the timer. The color of the circle is also changed by modifying the circletimer.css file.  Have a look:

jQuery timer anti clockwise

See online demo and code

The markup of above example:

    <div class="example">

      <div id="jquery-timer-demo"></div>

      <p>Time Elapsed: <span id="counter-time">0</span>ms</p>

      <button class="btn btn-success" id="btn-start"><span class="glyphicon glyphicon-play"></span></button>

      <button class="btn btn-primary" id="btn-pause"><span class="glyphicon glyphicon-pause"></span></button>

      <button class="btn btn-danger" id="btn-stop"><span class="glyphicon glyphicon-stop"></span></button>

    </div>

 

The Script:

 

  <script>

      $(document).on("ready", function() {

        $("#jquery-timer-demo").circletimer({

          onComplete: function() {

            alert("Your time of 5 seconds is up!");

          },

          onUpdate: function(elapsed) {

            $("#counter-time").html(Math.round(elapsed));

          },

          clockwise: false,

          timeout: 5000

        });

        $("#btn-start").on("click", function() {

          $("#jquery-timer-demo").circletimer("start");

        });

        $("#btn-pause").on("click", function() {

          $("#jquery-timer-demo").circletimer("pause");

        });

        $("#btn-stop").on("click", function() {

          $("#jquery-timer-demo").circletimer("stop");

        });

      })

    </script>

 

Get the complete code from the demo page.