JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
  <title>JS Animations</title>  
</head>
<body>
  
  <div class="ajax-loading"></div>
</body>
</html>

CSS

body {
  padding: 200px;
}

.ajax-loading {
  width: 30px;
  height: 30px;
  background: url(http://habrastorage.org/storage1/23f0d0f4/61944ec6/871774fb/7bb1a6b9.png) no-repeat;
}

JavaScript

(function ($) {
  $.fn.aimg = function (options) {

    options = $.extend({}, {
      speed: 150
    }, options);

    return this.each(function () {

      var $el = $(this),
          $img = $('<img src="' + $(this).css('backgroundImage').replace(/(^url)|(["'()])/g, '') + '" style="position: absolute; left: -99999px;">'),
          currFrame = 1,
          slides;

      $img.load(function () {
        slides = $(this).width() / $el.width();
        $(this).remove();
        startAnimation();
      });
      $('body').append($img);

      function startAnimation() {
        return setInterval(function () {

          $el.css('backgroundPosition', '-' + currFrame * $el.width() + 'px 0px');

          if (currFrame == slides) {
            $el.css('backgroundPosition', '0px 0px');
            currFrame = 0;
          }

          currFrame++;
        }, options.speed);
      }
    });
  }
})(jQuery);

$(document).ready(function () {
    $('.ajax-loading').aimg();
});