Animated transparent preloader image over a solid colored background

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.