JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="one" style="background: red;"></div>
<div id="two" style="background: green;"></div>
<div id="three" style="background: blue;"></div>

CSS

.loadingWrap {
    position: relative;
    overflow: hidden;
}

.loadingWrap img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 40px;        
}

JavaScript

/**
 * PlaceHolder v.1.0 
 * Author: Joonas Pääkkö
 * Website: www.joonas.me

 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
*/
(function($) {
  $.fn.extend({
    loadingIMG: function( options ) {
      
      var defaults = {
          loadingIMG: 'http://gifs.gifbin.com/112012/1356028617_bird_hitches_ride_on_truck.gif', // Url.
          width: 40,  // Width of a single frame.
          height: 40, // Height of a single frame.
          padding: 0,  // Padding between each frame in your image, if any.
          animate: 'y', // 'x' = Horizontal animation 'y' = Vertical animation
          speed: 90  // Speeeeeeed.
      },
      o = $.extend( {}, defaults, options);

      return this.each(function() {

       
        var target = $(this);
        
            // Spritesheet stacking direction makes no difference, but they do have to be stacked either horizontally or vertically.
        
        
        // Initialize the code
        $('<div style=" width: '+ o.width +'px; height: '+ o.height +'px; " class="loadingWrap"><img src="'+ o.loadingIMG +'" /></div>').appendTo( target );
        
        var wrap = $(this).find('.loadingWrap'),
            img = wrap.find('img'),
            horizontal =  o.animate === 'x' ? true : false,
            move = horizontal ? o.width : o.height,
            max = horizontal ? 'width' : 'height';
        
          console.log( img[max]() - move*2 )
          
          
        setInterval(function() {
              
        console.log( img[max]() - move*2 )
              console.log('sd')
              
            var imgCSS = {},
                lOr = horizontal ? 'left': 'top';
                
            // Change position
            if ( img.position()[lOr] >= -( img[max]() - move*2 ) ) {
                imgCSS[ lOr ] = '-='+ ( move + o.padding );
            }
            // Reset position
            else {
       ...