JSFiddle - React, Tailwind, and code Playground

by gonchuki

HTML

<div id="spinner"></div>
<div id="spinner2"></div>

CSS

#spinner2,
#spinner {
    width: 32px;
    height: 32px;
    display: inline-block;
    background: url('http://sandbox.gonchuki.com/adsk/s-single.png') no-repeat 0 0;
}

JavaScript

var Spinner = function(options) {
    var spinner = null,
        handle = null,
        position = 0,
        default_options = {
            frames: 12,
            size: 32,
            interval: 60,
            element_id: 'spinner'
        };
    
    options = options || {};
    for (var key in default_options) {
        if (default_options.hasOwnProperty(key)) {
            options[key] = options[key] || default_options[key];
        }
    }
    
    spinner = document.getElementById(options.element_id);
    
    var next = function() {
        if (position >= options.frames) { position = 0; }
        
        spinner.style.backgroundPosition = '-' + (position * options.size)  + 'px 0';
        
        position++;
    };
    
    this.start = function() {
        handle = setInterval(next, options.interval);
        return handle;
    };
    
    this.stop = function() {
        if (handle) { 
            clearInterval(handle);
            handle = null;
        }
    };
    
    this.start();
};

var my_spinner = new Spinner();
var my_spinner2 = new Spinner({element_id: 'spinner2', interval: '80'});