Search code examples
animationtransparencyanimated-gif

Animated transparent preloader image over a solid colored background

I want to show a preloader on my website before the content loads,However when i choose a animated preloader image with transparent background the edges look very jagged. How to I modify the image or is there a way to have a transparent background to animated gifs?

I am using the preloaders from preloader.net

Solution

  • The first and probably easiest option you have is to use spin.js. “It dynamically creates spinning activity indicators that can be used as resolution-independent replacement for AJAX loading GIFs.”

    If a script is not an option or you want to have a different spinner you have to create a .gif with no anti-aliasing that is bigger than the spinner you want to use and scale it down with html.

    Original spinner without edges (without anti-aliasing, therefore it has a pixelated edge):

    But if this spinner gets scaled down, it looks nice:

    Be sure to use

    img {
    -ms-interpolation-mode:bicubic;
}

    to make it also look pretty in older IEs.