JS timer with canvas arc progress.
A Pen by Arsen Zbidnyakov on CodePen.
<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> |
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 | |
} |
/* 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; | |
} |
JS timer with canvas arc progress.
A Pen by Arsen Zbidnyakov on CodePen.