HTML5 button background: animated radial cooldown timer - html

Question

I'm trying to make a normal HTML5 <button> that has an animated radial timer as a background.
My use case will be a button that refreshes a view. You can click it to refresh (thereby also restarting the timer), but the view will automatically refresh once every two minutes. This timer in the background of the button will serve as an indicator of how long it has been since it last refreshed and how long it will be until it automatically refreshes again.
I only need it to work in reasonably recent versions of Chrome, Firefox, and Safari. Don't sweat IE.
I managed to do what I wanted using SVG and a <polygon> that had its points recalculated using requestAnimationFrame, but it didn't work well in Firefox and it caused my MBP's fan to kick on. I'm sure I could do this in a <canvas>, but isn't there some way to do this using only CSS?
I know that the effect may be hard to visualize with my description above, so here are some examples that are close to what I'm trying to achieve.
These two use <canvas>, but you should be able to get the idea. I'm not looking for anything that fancy, though. A solid color is fine.
This one comes very close, but it uses SVG. Even though the animation is achieved with a CSS transition, the SVG is still taxing my CPU.
One final note is that I'm trying to make a background, not an overlay. Text (or in my case a fontawesome glyph) will sit on top of the background.

Answer 1

See if you can do anything with these classes and script.
var myCounter = new Countdown({
seconds: 120, // number of seconds to count down
onUpdateStatus: function (sec) {
}, // callback for each second
onCounterEnd: function () {
} // final action
});
function Countdown(options) {
var timer,
instance = this,
seconds = options.seconds,
updateStatus = options.onUpdateStatus,
counterEnd = options.onCounterEnd;
function decrementCounter() {
updateStatus(seconds);
if (seconds === 0) {
counterEnd();
instance.stop();
}
seconds--;
}
this.start = function () {
clearInterval(timer);
timer = 0;
seconds = options.seconds;
timer = setInterval(decrementCounter, 1000);
};
this.stop = function () {
clearInterval(timer);
};
}
myCounter.start();
.circle {
position: relative;
margin: 7em auto;
width: 16em; height: 16em;
border-radius: 50%;
background: black;
}
.arc {
overflow: hidden;
position: absolute;
top: 0em; right:50%; bottom: 50%; left: 0em;
transform-origin: 100% 100%;
transform: rotate(90deg) skewX(30deg);
}
.arc:before {
box-sizing: border-box;
display: block;
border: solid 8em grey;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-30deg);
content: '';
}
<div class="circle">
<div class="arc"></div>
</div>