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 = newDate();
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

11 thoughts to “Animated Badge Icon”

  1. I love your weather extension! I’m so glad I paid for the pro version. It’s one of very few that never gets turned off. 🙂
    I was thinking about sharing an image of the window that shows up when you click on the extension. Is there a possibility of that ever being added to the app?
    Context: I do daily video announcements (newsdesk style) for my elementary students. It would be awesome if we could have a title card that says the weather. I don’t know what programming would need to be behind it, but I was thinking just a static image of whatever the current conditions were would be great.
    Thank you again!

  2. Thanks for this article! Could you also provide the starting values for “start”, “lines”, “cW”, “cH”, and “context”?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.