Quick Hax: throbber/spinner with true alpha channel
After showing this hack to a friend, he suggested I blog about it so others could both use it and optimize it.
Today, I needed a throbber/spinner icon for a project. The standard way of doing this is with animated GIFs. They're widely supported, and have been around since like Netscape 1.1. The only rub is that transparent GIFs don't have true transparency. You just pick one colour to be "knocked out" when it's displayed. Anti-aliasing therefore isn't truly possible. Sure you could anti-alias against a colour that's similar to the background, but I couldn't. This throbber was to be displayed atop a gradient.
"Sounds like a job for vlad and pavlov's APNG!", I said to myself. I then realized that support for APNG among non-Mozilla browsers was limited to Opera. Since this was going on a web site, it had to be more cross-browser compatible than that.
I put together a quick hack today which I deem both cool and lame. The demo is found here, and you can view source to see what's going on.
The quick summary is that I have a single throbber PNG image with all 11 states of the throbber, in both white and black, with true transparency. Pick the one that contrasts more against your background. I then created CSS classes with coordinates for each state. Folks who have mucked about in the toolbars of Mozilla applications will recognize this trick. I then used the image of the states as the background behind a foreground image. The foreground image is a 1 pixel by 1 pixel transparent PNG, stretched to 16 pixels by 16 pixels; the size of the throbber. I then programmatically replace the class name on the image every tenth of a second, cycling through the 11 CSS classes.
As I said earlier, it's both cool and lame at the same time. Cool in that I succeeded in creating what I needed, but lame in that I took one of the hardest, most expensive ways of getting there. It also feels Wrong, similar to how making a website laid out with tables instead of CSS nowadays must feel. So if you have suggestions about how to improve this, make it suck less, or be more compact, toss it in a comment.
Note: If you're using jQuery, you can surely tighten this up using their $(foo) shorthand and CSS methods. For demonstration of this hack, I didn't want to rely on that.

