Timer to start pause and resume

Question

I'm using this Plugin for Timer https://github.com/wimbarelds/TimeCircles and is best for what I need. But always is here but :D

I want to make this timer to work better like when i click pause to pause not to pause only animation of circles also the time to stop. So here is my code

 $(".example.stopwatch").TimeCircles({ "animation": "smooth", "bg_width": 1.2, "fg_width": 0.1, "circle_bg_color": "#60686F", "start": false, "time": { "Days": { "text": "Days", "color": "#FFCC66", "show": true }, "Hours": { "text": "Hours", "color": "#99CCFF", "show": true }, "Minutes": { "text": "Minutes", "color": "#BBFFBB", "show": true }, "Seconds": { "text": "Seconds", "color": "#FF9999", "show": true } } }); $(".start").click(function () { $(".example.stopwatch").TimeCircles().start(); }); $(".stop").click(function () { $(".example.stopwatch").TimeCircles().stop(); }); $(".restart").click(function () { $(".example.stopwatch").TimeCircles().restart(); }); 

 /** * This element is created inside your target element * It is used so that your own element will not need to be altered **/ .time_circles { position: relative; width: 100%; height: 100%; } /** * This is all the elements used to house all text used * in time circles **/ .time_circles > div { position: absolute; text-align: center; } /** * Titles (Days, Hours, etc) **/ .time_circles > div > h4 { margin: 0px; padding: 0px; text-align: center; text-transform: uppercase; font-family: 'Century Gothic', Arial; } /** * Time numbers, ie: 12 **/ .time_circles > div > span { display: block; width: 100%; text-align: center; font-family: 'Century Gothic', Arial; font-size: 300%; margin-top: 0.4em; font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://git.wimbarelds.nl/TimeCircles/inc/TimeCircles.js"></script> <div class="panel-body"> <div class="example stopwatch" data-date="2016-07-20 00:00:00" style="width: 100%;"></div> <button class="btn btn-success btn-small start">Start</button> <button class="btn btn-danger btn-small stop">Stop</button> <button class="btn btn-info btn-small restart">Restart</button> </div> 

Answer 1

Do you realize its a Timer and Not a Stop Watch it counts down/up to some given time.

So in this example you have give the date time as 2016-07-20 00:00:00 so when ever the timer runs it shows how much time has passed to the above date time. This means no matter when you run the timer it will calculate the amount of time passed from the initial given date time and display it.

Taken from the plugin documentation

TimeCircles is a jQuery plugin that provides a nice looking way to either count down towards a certain time, or to count up from a certain time. The goal for TimeCircles is to provide a simple yet dynamic tool that makes it very easy to provide visitors an attractive countdown or timer.

So what you are asking for is a Stop Watch

Edit 1: (Thanks to your comment about data-timer) In order to make it as a stopwath you need to use data-timer="0" instead of data-date="2016-07-20 00:00:00"

Below is a working demo

 $(".example.stopwatch").TimeCircles({ "animation": "smooth", "bg_width": 1.2, "fg_width": 0.1, "circle_bg_color": "#60686F", "start": false, "time": { "Days": { "text": "Days", "color": "#FFCC66", "show": true }, "Hours": { "text": "Hours", "color": "#99CCFF", "show": true }, "Minutes": { "text": "Minutes", "color": "#BBFFBB", "show": true }, "Seconds": { "text": "Seconds", "color": "#FF9999", "show": true } } }); $(".start").click(function() { $(".example.stopwatch").TimeCircles().start(); }); $(".stop").click(function() { $(".example.stopwatch").TimeCircles().stop(); }); $(".restart").click(function() { $(".example.stopwatch").TimeCircles().restart(); }); 

 /** * This element is created inside your target element * It is used so that your own element will not need to be altered **/ .time_circles { position: relative; width: 100%; height: 100%; } /** * This is all the elements used to house all text used * in time circles **/ .time_circles > div { position: absolute; text-align: center; } /** * Titles (Days, Hours, etc) **/ .time_circles > div > h4 { margin: 0px; padding: 0px; text-align: center; text-transform: uppercase; font-family: 'Century Gothic', Arial; } /** * Time numbers, ie: 12 **/ .time_circles > div > span { display: block; width: 100%; text-align: center; font-family: 'Century Gothic', Arial; font-size: 300%; margin-top: 0.4em; font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://git.wimbarelds.nl/TimeCircles/inc/TimeCircles.js"></script> <div class="panel-body"> <div class="example stopwatch" data-timer="0" style="width: 100%;"></div> <button class="btn btn-success btn-small start">Start</button> <button class="btn btn-danger btn-small stop">Stop</button> <button class="btn btn-info btn-small restart">Restart</button> </div>