Loader Spinner Sprite
by skibulk
HTML
<div id="spinner" style="width:48px; height:48px; background: url(data:image/gif;base64,R0lGODlhgAEwAMQAAOPj45SUlIyMjNnZ2WZmZvLy8rKysvX19fj4+Kmpqfr6+sXFxf39/f7+/uvr63BwcNvb2/Pz8/z8/Le3t9TU1IODg7+/v8rKyqKiouXl5fHx8cDAwLCwsODg4Pb29v///yH5BAAAAAAALAAAAACAATAAAAX/4CeOZGmeaKqubOuyh0AQwvHeK5IIQoLgwJNiYTAsFMHkiAEYDAAMpbJxKBQODal2y+16vyvZjAZu7Xi9MotYNKpXTefzrapar/S8fs9fjcd9JGhogSNtbYUicnKJH3d3jZGSkyx/Mw6JgzwaiYdFNoWLTkiFj1ZRlKmqkWIzAo1nPAmNbEULjXFOAI12VqCrwMF5Ma6/gTqyP4lDtqSFTLqohVS+WcLXQAkPBAHGgRYBAhzKiRQTBhfOSgcBBA+zLQ4QAxnSSggcAgEWLggRBR6sSVFwwcAECpEYZBgAAVOjBh4KRCCHjUSCPxUaWRiEoRGFQxu2VPgDT4WDRR22/2AYxC/HI29BNhxCmKjDIoeFehWgWPHDtj8DEoUbtKvQuUM4gwyw9IDFvEUwbwDQFIDFv0cSpDjwNCHRAVEQEkkwFaEnCUsEghbSJKBoIE8GkgJZaomFqAFRX0zVxMJUgaxKtnryelesX7Mj2o15kJdOPjQBeO4p2GaCOiAHfs6oumKhHAj2gCAYyoMDi4h3IggMouBokQuJGDx1kiFRg6tWPCAWcWCku1uJEKzUR7OQApkG3SpZ8LNC4yU2GXLSQmEoBskmqEm8HATA0Q3c92h42iE0HwVXsewe4eS5HgAAsPdx4CB8kK9qXRw4YD4JAvg3SCDBagPRNwkD+03SgP+A6zXo4IMQRijhhBRWaOGFGGao4YYcdujhhyCGKOKIJJZo4okopqjiiiy26OKLMMYYIzE0uMeFdlgg04N8eTBjhH15QPNEf3rgSKAaNNbQiI4+NOLjEY0ICUUrZOih0wGxpJFILW4kksscXr20B5WvJJJlSYFwCVwhXwKA1h5+sdUIXI0UlshheryZCV+dDJbIXWjJVUacmkz3lic2gnEXkG/4RaQXge45iKF9wJXoF3eRuceVZ9JyyJqBtMmLmHpoauYgaPahJi6LAJDkpVIYySSPdDzJ6BtSPkqHkZuKoWRwZzS5DBtQxhYHFDImq+yyzDbr7LPQRivttNRWa+3/tdhmq+223Hbr7bfghivuiPDRegOCsH5A360vLAiYfvxNIuCR2uI3yX/K2YVXFwoY2IJwPARQnBLjOVEeC8cVMUG+rKVHbwkMRAcBpX1oFwG70jI3g3MeWWfuB73N8ACoSXhXBHgsPBbwxyrItkhtK1CmMMYp3PaIbp0tAloiqFmhGreZ/cHZMaSJw4JiIqdrQmuHwBaGJgzfgN8iLMAlaIB4qnCX0lv49W62dP3hpZx+WJJfEIIdcjTUUkztRFgruFbE1S+M9UhZK8zWXiK4WfE1tmGLPPYgQ6eg2QxnA5G2wixshEZHWkTnBN0kfNRGSFro9PFJcqQUHKnc+jZDo6p8DMdDSypcNEZGWiBXxMApgCMOyysoxBDlJZiDDs0qQCQR7fLQoysd/gD0sLXsuEM6H/jog/oK2nDD9dIFHfSFrVEeO7wavI673qtLBkv7F6t62eqod0zvfSZ/lFlIp32q/acojWS9fk96rsVnIZbOvwjvXXDU/cwSKf1NakufYpUcomYl0A0QG6Z6H6qcRCwAdiFXD7GDeh5YEfABKxlKCAEAOw==) no-repeat top left;">
<noscript>
<img src="spinner-fallback.gif">
</noscript>
</div>
CSS
html, body {
margin:0;
border:0;
padding:0;
width: 100%;
height: 100%;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
div {
margin: auto;
}
JavaScript
var slideWidth = 48;
var slideCount = 8;
var slidePos = localStorage['slidePos'] || 0;
var spinner = document.getElementById("spinner");
setInterval(function(){
if (++slidePos == slideCount) slidePos = 0;
spinner.style.backgroundPositionX = (slidePos * -slideWidth) + "px";
}, 175);
window.onunload = function (e) {
if (localStorage) localStorage['slidePos'] = slidePos;
}