Recently, I implemented a spinning icon on my website to indicate loading. However, I noticed that the quality of the icon appears low-resolution, even though the original image is high-quality.
Icon that looks good:
https://i.sstatic.net/GUc2J.jpg
Low-res icon in question:
https://i.sstatic.net/h5H8Z.jpg
Below is the CSS code I am using:
.no-js #loader {
display: none;
}
.js #loader {
display: block;
position: absolute;
left: 0;
top: 0;
}
.se-pre-con {
position: fixed;
left: 0;
top: 50px;
width: 100%;
height: 100%;
z-index: 9999;
background: url("../blue_loading.gif") center no-repeat;
}
I have tried various tweaks but cannot seem to fix the issue with the low-res appearance. Any suggestions or ideas would be greatly appreciated!