Best practice/tool for AJAX loading indicator as animated PNG sprite?

Obviously GIFs do not support an alpha channel. If I waned an alpha-channel开发者_开发百科 capable “throbber,” “spinner,” or Ajax loading indicator, it seems the only (post-IE6) cross-browser option would be a sprited PNG containing all the states of the throbber.

I guess I would be animating it myself using JavaScript to advance the frames (using requestAnimationFrame when available) by changing a class or something that sets the background origin.

I can't seem to find anything that helps generate this, specifically. Does anyone know of any? Any best practices I should know about? (I know that e.g. Compass has a sprite helper I can take advantage of for automating the CSS portion, at least.)

---

I don't think there are any "best practices", but there are a lot of tools out there. Start by doing a search for "animated gif to sprite". If you have ImageMagick installed take a look at this post:

http://forums.tigsource.com/index.php?topic=9041.msg282280#msg282280

Once you have a sprite the options for animation all depend on how you prefer to code your javascript.

What is your browser matrix? If you have the luxury (FF, Safari, Chrome, etc.) you can use CSS animation like the following which assumes each frame is 100px square and you sprite has 5 frames.

#animatedImage {
  width: 100px;
  height: 100px;
  background: transparent url(sprite.png) no-repeat 0 0;
  animation-duration: 400ms;
  animation-iteration-count: infinite;
  animation-timing-function: step-start;
  animation-name: animateSprite;
}
@-webkit-keyframes animateSprite {
    0%  { background-position: 0 0; }
   20%  { background-position: -400px 0; }
   40%  { background-position: -300px 0; }
   60%  { background-position: -200px 0; }
   80%  { background-position: -100px 0; }
  100%  { background-position: 0 0; }
}