JSFiddle - React, Tailwind, and code Playground

by hmdadou

HTML

<div id="timer"></div>

CSS

#timer {
    margin: 20px;
    width: 80px;
    -moz-border-radius:0.7em;
    -webkit-border-radius:0.7em;
    border-radius:0.7em;
    border:2px solid #ccc;
}

.pietimer {
    position:relative;
    font-size: 200px;
    width:1em;
    height:1em;
    float: left;
}
.pietimer > .percent {
    position: absolute;
    top: 1.05em;
    left: 0;
    width: 3.33em;
    font-size: 0.3em;
    text-align:center;
    display: none;
    z-index:10;
    font-weight:bold;
}
.pietimer > .slice {
    position:absolute;
    width:1em;
    height:1em;
    clip:rect(0px,1em,1em,0.5em);
}
.pietimer > .slice.gt50 {
    clip:rect(auto, auto, auto, auto);
}
.pietimer > .slice > .pie {
    position:absolute;
    width:0.8em; /* 1 - (2 * border width) */
    height:0.8em; /* 1 - (2 * border width) */
    clip:rect(0em,0.5em,1em,0em);
    -moz-border-radius:0.5em;
    -webkit-border-radius:0.5em;
    border-radius:0.5em;
}
.pietimer > .slice > .pie.fill {
    -moz-transform:rotate(180deg) !important;
    -webkit-transform:rotate(180deg) !important;
    -o-transform:rotate(180deg) !important;
    transform:rotate(180deg) !important;
}
.pietimer.fill > .percent {
    display: none;
}
.pietimer.fill > .slice > .pie {
    border: transparent;
    background-color: #c0c0c0;
    width:1em;
    height:1em;
}

JavaScript

(function($){
  var methods = {
    init: function(options) {
      var state = {
        timer: null,
        timerSeconds: 10,
        callback: function() {},
        timerCurrent: 0,
        showPercentage: false,
        fill: false,
        color: '#CCC'
      };

      state = $.extend(state, options);

      return this.each(function() {
        var $this = $(this);
        var data = $this.data('pietimer');
        if (!data) {
          $this.addClass('pietimer');
          $this.css({fontSize: $this.width()});
          $this.data('pietimer', state);
          if (state.showPercentage) {
            $this.find('.percent').show();
          }
          if (state.fill) {
            $this.addClass('fill');
          }
          $this.pietimer('start');
        }
      });
    },

    stopWatch: function() {
      var data = $(this).data('pietimer');
      if (data) {
        var seconds = (data.timerFinish-(new Date().getTime()))/1000;
        if (seconds <= 0) {
          clearInterval(data.timer);
          $(this).pietimer('drawTimer', 100);
          data.callback();
        } else {
          var percent = 100-((seconds/(data.timerSeconds))*100);
          $(this).pietimer('drawTimer', percent);
        }
      }
    },

    drawTimer: function(percent) {
      $this = $(this);
      var data = $this.data('pietimer');
      if (data) {
        $this.html('<div class="percent"></div><div class="slice'+(percent > 50?' gt50"':'"')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');
        var deg = 360/100*percent;
        $this.find('.slice .pie').css({
          '-moz-transform':'rotate('+deg+'deg)',
          '-webkit-transform':'rotate('+deg+'deg)',
          '-o-transform':'rotate('+deg+'deg)',
          'transform':'rotate('+deg+'deg)'
        });
         var secs = (data.timerSeconds)*((100-percent)/100);/*NEW*/
    $this.find('.percent').html(Math.round(secs)+'');/*Changed*/
    if (data.showPercentage) {
  ...