Animated Badge Icon

2 min read
Animated Badge Icon

Weather Extension was recently updated to have a spinning indicator in the badge icon to let the user know the extension is loading when it is clicked. I wanted to give the user immediate feedback. The challenge was that the badge toolbar icon is limited to static images. I was able to get around this by using canvas and generating multiple images that update the icon. I’ve haven’t come across anything like this so I thought I would share.

Javascript JSFiddle example: https://jsfiddle.net/w7t2fe0j/

var context=document.createElement('canvas').getContext('2d');
var start = new Date();
var lines = 16,
cW = 40,
cH = 40;

setInterval(function() {
var rotation = parseInt(((new Date() - start) / 1000) * lines) / lines;
context.save();
context.clearRect(0, 0, cW, cH);
context.translate(cW / 2, cH / 2);
context.rotate(Math.PI * 2 * rotation);
for (var i = 0; i < lines; i++) {
context.beginPath();
context.rotate(Math.PI * 2 / lines);
context.moveTo(cW / 10, 0);
context.lineTo(cW / 4, 0);
context.lineWidth = cW / 30;
context.strokeStyle = ‘rgba(0, 0, 0,’ + i / lines + ’)’;
context.stroke();
}


var imageData = context.getImageData(10, 10, 19, 19);
chrome.browserAction.setIcon({
imageData: imageData
});


context.restore();
}, 1000 / 30);

Tips:

  • Have a timeout to hide the loading icon so it does not get stuck
  • Set the badge icon from a background task so it does not get stuck spinning if the user closes the popup