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;
}