<div class="container">
    <div id="pm">
  <input type="button" id="plus" value="">
  <input type="button" id="minus" value="">
    </div>
    <p id="result">30</p>
    <p id="sec">sec</p>
    <canvas id="progress" width="200" height="200"></canvas><!-- progress bar -->
</div>
<div class="buttons">
    <input type="button" id="start" value="Start">
    <input type="button" id="stop" value="Stop">
</div>

/* Font Awesome */
@import url(https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

/* Roboto Condensed */
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:700);

.container {
    position: relative;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #3B3A3F;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

#progress {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 1s ease-in-out;
}

p {
    margin: 0;
    color: #00CE9B;
    font-weight: 700;
}

#result {
    padding: 60px 0 0;
    font-size: 80px;
    line-height: 60px;
}

#sec {
    font-size: 28px;
}

#start, #stop {
    position: relative;
    width: 100px;
    height: 40px;
    outline: 0;
    border: 0;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
}

#start {
    background: #4897F0;
}

#start:hover {
    background: #4087d8;
}

#stop {
    background: #00CE9B;
}

#stop:hover {
    background: #00b98b;
}

#start:active, #stop:active {
    top: 1px;
}

#plus {
    width: 100%;
    padding: 0;
    outline: 0;
    border: 0;
    color: #aaa;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    font-family: FontAwesome, sans-serif;
}

#minus {
    width: 100%;
    padding: 0;
    outline: 0;
    border: 0;
    color: #aaa;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    font-family: FontAwesome, sans-serif;
    
}

#pm {
  position: absolute;
  top: 70px;
  left: 20px;
  opacity: .1;
  z-index: 9999;
}

.container:hover > #pm {
  opacity: 1;
}

.buttons {
  width: 300px;
  margin: 20px auto;
  text-align: center;
}

var timer, stopTimer,
    result = document.getElementById('result'),
    sec    = document.getElementById('sec'),
    start  = document.getElementById('start'),
    stop   = document.getElementById('stop'),
    plus   = document.getElementById('plus'),
    minus  = document.getElementById('minus'),
    n      = +result.innerHTML;
    
// events
start.addEventListener('click', function() {
    startTimer(n);
}, false);

stop.addEventListener('click', function() {
    stopTimer();
}, false);

plus.addEventListener('click', function() {
    result.innerHTML = ++n;
}, false);

minus.addEventListener('click', function() {
    result.innerHTML = --n;
}, false);

// functions
function startTimer(n) {
    var i = n-1; // fix 1 sec start delay
  document.getElementById('pm').style.display = 'none'; // hide arrows

    timer = setInterval( function() {
  result.innerHTML = i--;
     
     stopTimer = function() {
       clearInterval(timer);
       result.innerHTML = i + 1;
     }
  
     if (i < 5) {
   result.style.color = '#ED3E42';
   sec.style.color = '#ED3E42';
  } // hurry up!
  
  if (i < 0) { stopTimer(); } // finish
  
  function updateProgress() {
   var canvas = document.getElementById('progress');
   var context = canvas.getContext('2d');
   var centerX = canvas.width / 2;
   var centerY = canvas.height / 2;
   var radius = 80;
   var circ = Math.PI * 2; // 360deg
   var percent = i / n; // i%
   context.beginPath();
   context.arc(centerX, centerY, radius, ((circ) * percent), circ, false);
   context.lineWidth = 10;
   if (i < 5) {
    context.strokeStyle = '#ED3E42';
   } else {
    context.strokeStyle = '#00CE9B';
   }
   context.stroke();
  } // progress
  
  updateProgress();
    
    }, 1000); // every sec

}