Menu
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
317
Unfortunately no, the GIF format doesn't support partial (alpha-channel) transparency, meaning any pixel can only be fully tansparent or fully opaque, so it's not possible to make partially transparent GIFs and achieve anti-aliasing effect against different backgrounds.
To replace the color of an input GIF, use the options and enter the color's name. For example, "blue", "navy", or "teal". You can also use a hex code, such as "#008000" or an RGB code, such as "rgb(255, 192, 203)". The special color name "transparent" can be used to specify transparency.
Move the GIF to the right spot Switch to the panel ("tab") with a still image. You will see your GIF in the top left corner. Now, click and drag it to a new position (notice, that a whole folder is highlighted, so you are moving all frames at the same time).
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.
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
