JSFiddle - React, Tailwind, and code Playground
HTML
<div id="theimage"></div>
CSS
#theimage{
background: url("http://jc-designs.net/images/minCogSprite.png");
width: 38px;
height: 39px;
position: relative;
top: 143px;
left: 228px;
}
JavaScript
$(function() {
var interval = 50; //Decides how fast this sucker will spin
var numberOfFrames = 3; //There are three images in the sprite
var spriteWidth = 114 //Sprite image is 114px split into 3
var shiftAmount = spriteWidth / numberOfFrames;
var bgPos = 0; //Initialize background position
for (var i = 0; i < 5000; i++) {
for (var j = 1; j <= numberOfFrames; j++) {
bgPos = shiftAmount * j;
(function(bgPos) {
setTimeout(function() {
$('#theimage').css('backgroundPosition', '-' + bgPos + 'px 0')
}, i * numberOfFrames * interval + interval * j);
})(bgPos);
}
}
});