treehouse : what would you like to learn today?
Web Design Web Development iOS Development

transparent loading icons

  • 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.

  • 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

  • yes a loading gif for ajax and whatnot. Fairly small 16x1g. A standard circle animation is what I'm looking for, but everything with a transparent bg seems to be very jagged.

  • 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.