transparent loading icons

[fooman]

How are you guys dealing with loading icons that need to be transparent?
Every tool I see online gives an awesome pixelated effect around the non-transparent portions of the image.

I assume you could use icon-fonts and animate them, but isn’t animation supported in something like 40% of browsers…?
Anyways, just looking for some guidance. Worse comes to worse I’ll rig something up as best I can.

[Paulie_D]

Do you mean a loading gif?

Depends how detailed they need to be and how big they are.

Otherwise I’m confused about what you are actually asking

[Senff]

GIFs don’t have alpha transparency — every pixel is either a color or empty, so that causes the pixelation.
With PNGs, alpha transparency is possible but that doesn’t animate.

You might want to look into a solution that doesn’t use images, like Spin.js. Not as easy/fast to integrate as an image, but more customizable and no pixelated edges.

[Author]

Posts