Grow your CSS skills. Land your dream job.

transparent loading icons

  • # March 5, 2013 at 11:59 am

    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.

    # March 5, 2013 at 12:02 pm

    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

    # March 5, 2013 at 1:15 pm

    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.

    # March 5, 2013 at 3:40 pm

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".