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.

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

Originally published at Tim Leland.

Like what you read? Give Tim a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.