Imagine your designer has an ambitious, loading spinner animation. This button pulses, grows and fades in and out. They spend hours on it in After Effects, perfecting the number of frames, the blueness of the blue, striving to maximize the amount it distracts the user from the fact that their request is taking a really long time.

At the end of the day they give you this. loading-indicator-white And it looks great…you have to agree. So you plop it in an image tag on a black background…. And you’re like, “What the heck? This looks like garbage!” loading-indicator-black It’s at this point one of your coworkers, with enough knowledge about CSS animations, notices you cursing under your breath, looks at it and says, “I could totally make that in CSS.” So they kindly ask your designer to export the animation as a png sequence, so they can observe the individual frames and derive the meaning behind the animation.

Eventually after several hours of toiling and tweaking, they eventually get an animation together that looks like this: Embedded content: http://codepen.io/samuelmaddock/pen/vXmmXL Click ‘Run Pen’ to view

And you’re happy with it. You use it everywhere! Buttons, page loads, the world has never seen such amazingly timed, concentric blue circles.

However, one unremarkable day, you decide to see how the animation performs on a low-powered device…maybe there’s an old android phone you want to check it out on. Or perhaps, you’re building a Chromecast receiver application, and want to try out the spinner on that. And you find that the performance is subpar - there aren’t enough repaints on the hardware to make your image look smooth. Or perhaps, it’s trying to load a video in the background, and there just aren’t enough free animation frames.

And you lament, again.

In your weakened emotional state, you begin to hear voices whispering to you about something called a CSS sprite, and how you can animate it. And you think you’re losing your mind – at least until you turn around and see another one of your coworkers messing with your head.

But you decide to try out their suggestion. You take that PNG sequence design gave you and you web service or npm package to turn a PNG sequence into a sprite. You are a web developer after all. And you find the following!

http://spritegen.website-performance.org/

Or

https://github.com/selaux/node-sprite-generator

And in no time at all you export a horizontally laid out sprite, with no padding, of all of your png sequences. spinner2 white spinner2 black And eventually after some toiling with numbers you get: Embedded content: https://jsfiddle.net/CGmCe/15662/ Click ‘Result’ tab to view

You load that up on your device…and it looks great! You take one last optimization step and base 64 encode the image use directly in the CSS. And…boom! You have a high performant spinner, so that even on low-powered devices, users are still easily distracted from the fact that they’re waiting so long.

Further Reading:

http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/