Death of the loading.gif

Animated gifs are fun, they make it easy to ad some motion to a webpage or app. However, the gif format lacks many features that cause them to look potentially ugly in a design, namely alpha channels. An animated gif can have only pre-specified colors marked as transparent which means they might not look good on anything other than a solid background. This can become a problem if you want these animated images on an unknown background color or a photo. Here’s a simple loading.gif file. It looks alright on my own website since it’s designed for a light or white background. It’s as easy to put into a webpage as any standard image.

However, that same loading.gif file might not look so great on another color or on a photo. Notice the pixelation around the shapes and how the light gray parts look out of place.

The png file type has the abiltiy to have an alpha channel. An alpha channel means that it’s transparency can include different levels of opaque pixels which results in smoother edges that can look good on nearly any background. These file types don’t have the capability to be animated in the same way a gif does, so how do we make a png file replace the loading.gif?

The Answer: CSS3 Animations

With simple CSS3 animations, we can make an element animate in nearly any way we want. In the case of a loading image, this is as sipmle as making the png image spin in place. A single png file with an alpha channel can be placed anywhere on top of other content and won’t show those ugly pixelated “jaggies” that the loading.gif has. The code is simple, simply place your loading.png file wherever it needs to be and give it a class name of “loading” (or any other class name you define, it’s up to you).

.loading { 
  -webkit-animation:spin 2s linear infinite; 
  -moz-animation:spin 2s linear infinite; 
  animation:spin 2s linear infinite; 
} 
@-moz-keyframes spin { 
  100% { -moz-transform:rotate(360deg); } 
} 
@-webkit-keyframes spin { 
  100% { -webkit-transform:rotate(360deg); } 
} 
@keyframes spin { 
  100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); } 
} 

The above CSS produces a result like this (same png image, one on a gray background):

All of these loading images will look good on any background you give them, assuming your background is primarily light or dark (simply invert the png file if on a dark background). Not only is the single png file significantly smaller in file size than the gif, but it’s also easier to create. With CSS3 we can create better looking simple loading animations. CSS3 can animate nearly any DOM element including SVG and HTML text like a web font or text character. All modern web browsers support both PNG and these CSS3 animations. There should be no need to create/use the more bloated loading.gif in any of your web or app projects.