JSFiddle - React, Tailwind, and code Playground

HTML

<div class="loading">
    <div class="common-spinner common-spinner-40x55" id="common-spinner" style="background-position: 0px 0px;"></div>
</div>

CSS

.loading .common-spinner {
    margin: 0 auto;
}

.common-spinner.common-spinner-40x55 {
    height: 55px;
    width: 40px;
}

.common-spinner {
    background: url("http://i41.tinypic.com/e6et8z.jpg") no-repeat scroll 100% 100% transparent;
}

JavaScript

function setBgPosition() {
   var c = 0;
    var numbers = [0, -120, -240, -360, -480, -600, -720];
    function run() {
       Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
        if (c<numbers.length)
        {
            setTimeout(run, 200);
        }else
        {
            setBgPosition();
        }
    }
    setTimeout(run, 200);
}

setBgPosition();