JSFiddle - React, Tailwind, and code Playground

by gonchuki

HTML

<div id="test_1">inject spinner, click to attach</div>
<div id="test_2">replace element, click to attach</div>

CSS

.spinner {
  background:url("http://sandbox.gonchuki.com/adsk/s-single.png") no-repeat scroll left top transparent;
  height:16px;
  width:16px;
  display: inline-block;
  vertical-align: middle;
  margin-right: .5em;
}
.spinned {
  display:none !important;
}

/* do not copy,just for the example */
#test_1, #test_2 {
    color: #08f;
    cursor: pointer;
}
/* end */

JavaScript

(function($) {
  // requires: jQuery
  // provides: Spinner
  var Spinner = this.Spinner = function(options) {
    var $spinner = null,
        handle = null,
        position = 0,
        default_options = {
          frames: 12,
          size: 16,
          yoffset: 0,
          interval: 60,
          autorun: false,
          parent: document.body,
          element: null,
          spinner_class: 'spinner'
        };
    
    options = options || {};
    for (var key in default_options) {
      if (default_options.hasOwnProperty(key)) {
        options[key] = options[key] || default_options[key];
      }
    }
    
    $spinner = options.element ? $(options.element) : $('<div/>').appendTo(options.parent);
    $spinner.css({
      backgroundPosition: '-' + options.size + 'px ' + options.yoffset + 'px',
      width: options.size,
      height: options.size
    }).addClass(options.spinner_class);
    
    var next = function() {        
      $spinner.css({backgroundPosition: '-' + (position * options.size)  + 'px ' + options.yoffset + 'px'});
      
      position = (position + 1) % options.frames;
    };
    
    this.start = function() {
      if (!handle) handle = setInterval(next, options.interval);
      return handle;
    };
    
    this.stop = function() {
      if (handle) {
        clearInterval(handle);
        handle = null;
      }
    };
    
    this.toElement = function() { return $spinner; };
    this.toString = function() { return handle; };
    
    if (options.autorun) this.start();
  };
  
  // requires: [jQuery, Spinner]
  // provides: jQuery().spinner()
  $.fn.spinner = function(options) {
    options = options || {};
    var $target = $(this), $element, spinner, spinner_options;
    
    if (typeof options === 'string') {
      $.each($target, function (i, element) {
        $element = $(element);
        spinner = $element.data('spinner');
        
        if (options === 'restore') {
          spinner_options =...