A Pen by Arsen Zbidnyakov.

index.html

<div class="container">
	<div id="pm">
		<input type="button" id="plus" value="&#xf0de;">
		<input type="button" id="minus" value="&#xf0dd;">
	</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>

script.js

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

}

style.css

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

/* Roboto Condensed */
@import url(http://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;
}

Timer.markdown

Timer

JS timer with canvas arc progress.

A Pen by Arsen Zbidnyakov on CodePen.

License.