I want add This counter with custom moduel :
Index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery CircularCountDownJs Plugin Demo</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> <style> body { background-color:#333;} .container { margin:150px auto;} h1 { color:#fff;} </style> </head> <body> <div id="jquery-script-menu"> <div class="jquery-script-center"> <ul> <li><a href="http://www.jqueryscript.net/time-clock/Circular-Countdown-Clock-Plugin-For-jQuery-CircularCountDownJs.html">Download This Plugin</a></li> <li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li> </ul> <div class="jquery-script-ads"><script type="text/javascript"><!-- google_ad_client = "ca-pub-2783044520727903"; /* jQuery_demo */ google_ad_slot = "2780937993"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="https://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> <div class="jquery-script-clear"></div> </div> </div> <div class="container"> <h1>jQuery CircularCountDownJs Plugin Demo</h1> <div class="launcher"> Delay : <input type="text" class="delay form-control" value="5"> <button class="btn btn-danger">start</button> </div> <div class="timer"></div> </div> <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <script src="circular-countdown.js"></script> <script> $ (document).ready(function() { $ ('button').click(function() { // Run the countdown $ ('.timer').circularCountDown({ delayToFadeIn: 500, size: 250, fontColor: '#fff', colorCircle: 'white', background: '#2ECC71', reverseLoading: false, duration: { seconds: parseInt($ ('.delay').val()) }, beforeStart: function() { $ ('.launcher').hide(); }, end: function(countdown) { countdown.destroy(); $ ('.launcher').show(); //alert('terminé'); } }); }); }); </script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-36251023-1']); _gaq.push(['_setDomainName', 'jqueryscript.net']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> </html> circular-countdown.js
(function ($ ) { var defaultOptions = { size: 60, borderSize: 10, colorCircle: 'gray', background: 'white', fontFamily: 'sans-serif', fontColor: '#333333', fontSize: 16, delayToFadeIn: 0, delayToFadeOut: 0, reverseLoading: false, reverseRotation: false, duration: { hours: 0, minutes: 0, seconds: 10 }, beforeStart: function(){}, end: function(){} }; $ .fn.circularCountDown = function (options) { new CircularCountDown(options, $ (this)); }; function CircularCountDown(data, element) { this.element = element; this.data = jQuery.extend(true, defaultOptions, data); this.init(); } CircularCountDown.prototype = { init: function () { this.formatData(); this.draw(); this.start(); }, start: function () { if (typeof this.data.beforeStart == "function") { this.data.beforeStart(this); } this.show(); this.starDecrementTimeEvent(); var time = this.getFormattedTimeByCircle(); this.animate(time); }, animate: function(time) { var that = this; if (!that.data.reverseLoading) { that.wrapperCircles.css( 'clip', 'rect(0px, ' + that.data.size + 'px, ' + that.data.size + 'px, ' + (that.data.size / 2) + 'px)' ); that.rotate(that.circlelRight, 0, 180, time, function () { that.wrapperCircles.css('clip', 'rect(auto, auto, auto, auto)'); that.rotate(that.circlelLeft, 180, 360, time); }); } else { that.rotate(that.circlelRight, 180, 360, time, function() { that.wrapperCircles.css( 'clip', 'rect(0px, ' + (that.data.size / 2) + 'px, ' + that.data.size + 'px, 0px)' ); that.rotate(that.circlelLeft, 0, 180, time); that.rotate(that.circlelRight, 0, 180, time); }); } }, formatData: function () { this.time = this.data.duration.seconds + (this.data.duration.minutes * 60) + (this.data.duration.hours * 3600) ; this.data.size = parseInt(this.data.size); this.data.borderSize = parseInt(this.data.borderSize); if (this.data.borderSize % 2 != 0) { this.data.borderSize++; } if (this.data.size % 2 != 0) { this.data.size++; } }, draw: function () { this.hide(); this.circlelLeft = this.drawCircle().addClass('coutndown-circle-left'); this.circlelRight = this.drawCircle().addClass('coutndown-circle-right'); this.wrapperCircles = $ ('<div>') .addClass('coutndown-wrapper') .css({ 'width': this.data.size + 'px', 'height': this.data.size + 'px', 'position': 'absolute', }) .append(this.circlelLeft) .append(this.circlelRight) ; this.wrapperTime = this.drawTime(); this.element .css({ 'position': 'relative', 'box-sizing': 'content-box' }) .append(this.wrapperCircles) .append(this.wrapperTime) ; this.setTime(this.getStringTime(this.time)); }, drawCircle: function () { var size = this.data.size - (this.data.borderSize * 2); size += 'px'; return $ ('<div>') .addClass('coutndown-circle') .css({ 'width': size, 'height': size, 'border': this.data.borderSize + 'px solid ' + this.data.colorCircle, '-moz-border-radius': this.data.size + 'px', '-webkit-border-radius': this.data.size + 'px', '-o-border-radius': this.data.size + 'px', '-ms-border-radius': this.data.size + 'px', 'border-radius': this.data.size + 'px', 'box-sizing': 'content-box', 'background-color': this.data.background, 'position': 'absolute', 'clip': 'rect(0px, ' + (this.data.size / 2) + 'px, ' + this.data.size + 'px, 0px)' }); }, rotate: function (elem, startAngle, endAngle, duration, complete) { $ ({deg: startAngle}).animate({deg: endAngle}, { duration: duration, easing: 'linear', step: function (now) { elem.css({ '-moz-transform': 'rotate(' + now + 'deg)', '-webkit-transform': 'rotate(' + now + 'deg)', '-o-transform': 'rotate(' + now + 'deg)', '-ms-transform': 'rotate(' + now + 'deg)', 'transform': 'rotate(' + now + 'deg)' }); }, complete: complete || $ .noop }); }, hide: function () { this.element.fadeOut(this.data.delayToFadeOut); this.visible = false; }, show: function () { this.element.fadeIn(this.data.delayToFadeIn); this.visible = true; }, isVisible: function () { return this.visible; }, getStringTime: function (time) { var duration = this.secondsToTime(time); if (duration.h > 0) { return this.addDigit(duration.h) + ':' + this.addDigit(duration.m) + ':' + this.addDigit(duration.s); } if (duration.m > 0) { return this.addDigit(duration.m) + ':' + this.addDigit(duration.s); } return this.addDigit(duration.s); }, addDigit: function (number) { return ("0" + number).slice(-2); }, secondsToTime: function (time) { var hours = Math.floor(time / (60 * 60)); var divisor_for_minutes = time % (60 * 60); var minutes = Math.floor(divisor_for_minutes / 60); var divisor_for_seconds = divisor_for_minutes % 60; var seconds = Math.ceil(divisor_for_seconds); return { h: hours, m: minutes, s: seconds }; }, getFormattedTimeByCircle: function () { var time = this.time / 2 * 1000; if (time % 2 != 0) { time++; } return time; }, starDecrementTimeEvent: function () { var that = this; this.decrementTimeEvent = setInterval(function () { that.time -= 1; that.setTime(that.getStringTime(that.time)); if (that.time <= 0) { that.time = 0; that.stopDecrementTimeEvent(); if (typeof that.data.end == "function") { that.data.end(that); } } }, 1000); }, stopDecrementTimeEvent: function () { clearInterval(this.decrementTimeEvent); }, drawTime: function () { return $ ('<div>') .addClass('coutndown-wrapper-time') .css({ 'position': 'absolute', 'height': this.data.size + 'px', 'width': this.data.size + 'px', 'line-height': this.data.size + 'px', 'text-align': 'center', 'font-size': this.data.fontSize + 'px', 'font-family': this.data.fontFamily, 'color': this.data.fontColor }) ; }, setTime: function (time) { this.wrapperTime.html(time); }, destroy: function() { this.hide(); this.element.html('').attr('style', null); this.circlelLeft = null; this.circlelRight = null; this.wrapperCircles = null; this.element = null; this.data = defaultOptions; } };}(jQuery)); circular-countdown.min.js
!function(t){function i(t,i){this.element=i,this.data=jQuery.extend(!0,e,t),this.init()}var e={size:60,borderSize:10,colorCircle:"gray",background:"white",fontFamily:"sans-serif",fontColor:"#333333",fontSize:16,delayToFadeIn:0,delayToFadeOut:0,reverseLoading:!1,reverseRotation:!1,duration:{hours:0,minutes:0,seconds:10},beforeStart:function(){},end:function(){}};t.fn.circularCountDown=function(e){new i(e,t(this))},i.prototype={init:function(){this.formatData(),this.draw(),this.start()},start:function(){"function"==typeof this.data.beforeStart&&this.data.beforeStart(this),this.show(),this.starDecrementTimeEvent();var t=this.getFormattedTimeByCircle();this.animate(t)},animate:function(t){var i=this;i.data.reverseLoading?i.rotate(i.circlelRight,180,360,t,function(){i.wrapperCircles.css("clip","rect(0px, "+i.data.size/2+"px, "+i.data.size+"px, 0px)"),i.rotate(i.circlelLeft,0,180,t),i.rotate(i.circlelRight,0,180,t)}):(i.wrapperCircles.css("clip","rect(0px, "+i.data.size+"px, "+i.data.size+"px, "+i.data.size/2+"px)"),i.rotate(i.circlelRight,0,180,t,function(){i.wrapperCircles.css("clip","rect(auto, auto, auto, auto)"),i.rotate(i.circlelLeft,180,360,t)}))},formatData:function(){this.time=this.data.duration.seconds+60*this.data.duration.minutes+3600*this.data.duration.hours,this.data.size=parseInt(this.data.size),this.data.borderSize=parseInt(this.data.borderSize),this.data.borderSize%2!=0&&this.data.borderSize++,this.data.size%2!=0&&this.data.size++},draw:function(){this.hide(),this.circlelLeft=this.drawCircle().addClass("coutndown-circle-left"),this.circlelRight=this.drawCircle().addClass("coutndown-circle-right"),this.wrapperCircles=t("<div>").addClass("coutndown-wrapper").css({width:this.data.size+"px",height:this.data.size+"px",position:"absolute"}).append(this.circlelLeft).append(this.circlelRight),this.wrapperTime=this.drawTime(),this.element.css({position:"relative","box-sizing":"content-box"}).append(this.wrapperCircles).append(this.wrapperTime),this.setTime(this.getStringTime(this.time))},drawCircle:function(){var i=this.data.size-2*this.data.borderSize;return i+="px",t("<div>").addClass("coutndown-circle").css({width:i,height:i,border:this.data.borderSize+"px solid "+this.data.colorCircle,"-moz-border-radius":this.data.size+"px","-webkit-border-radius":this.data.size+"px","-o-border-radius":this.data.size+"px","-ms-border-radius":this.data.size+"px","border-radius":this.data.size+"px","box-sizing":"content-box","background-color":this.data.background,position:"absolute",clip:"rect(0px, "+this.data.size/2+"px, "+this.data.size+"px, 0px)"})},rotate:function(i,e,a,s,r){t({deg:e}).animate({deg:a},{duration:s,easing:"linear",step:function(t){i.css({"-moz-transform":"rotate("+t+"deg)","-webkit-transform":"rotate("+t+"deg)","-o-transform":"rotate("+t+"deg)","-ms-transform":"rotate("+t+"deg)",transform:"rotate("+t+"deg)"})},complete:r||t.noop})},hide:function(){this.element.fadeOut(this.data.delayToFadeOut),this.visible=!1},show:function(){this.element.fadeIn(this.data.delayToFadeIn),this.visible=!0},isVisible:function(){return this.visible},getStringTime:function(t){var i=this.secondsToTime(t);return i.h>0?this.addDigit(i.h)+":"+this.addDigit(i.m)+":"+this.addDigit(i.s):i.m>0?this.addDigit(i.m)+":"+this.addDigit(i.s):this.addDigit(i.s)},addDigit:function(t){return("0"+t).slice(-2)},secondsToTime:function(t){var i=Math.floor(t/3600),e=t%3600,a=Math.floor(e/60),s=e%60,r=Math.ceil(s);return{h:i,m:a,s:r}},getFormattedTimeByCircle:function(){var t=this.time/2*1e3;return t%2!=0&&t++,t},starDecrementTimeEvent:function(){var t=this;this.decrementTimeEvent=setInterval(function(){t.time-=1,t.setTime(t.getStringTime(t.time)),t.time<=0&&(t.time=0,t.stopDecrementTimeEvent(),"function"==typeof t.data.end&&t.data.end(t))},1e3)},stopDecrementTimeEvent:function(){clearInterval(this.decrementTimeEvent)},drawTime:function(){return t("<div>").addClass("coutndown-wrapper-time").css({position:"absolute",height:this.data.size+"px",width:this.data.size+"px","line-height":this.data.size+"px","text-align":"center","font-size":this.data.fontSize+"px","font-family":this.data.fontFamily,color:this.data.fontColor})},setTime:function(t){this.wrapperTime.html(t)},destroy:function(){this.hide(),this.element.html("").attr("style",null),this.circlelLeft=null,this.circlelRight=null,this.wrapperCircles=null,this.element=null,this.data=e}}}(jQuery); 
