JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<body>
  
  <p><i>Hover over the table to see how loading looks</i></p>
  
  <table id="table"> <tr><td>table</td></tr> </table>

  <div id="overlay">
    <img src="http://www.sanbaldo.com/wordpress/wp-content/bigrotation2.gif" id="img-load" />
  </div>

CSS

* { margin:0; padding:0; }
  body { padding: 30px; }
  table { width:500px; height:500px; padding:20px; background:#f1f1f1; color:#000;  }
  
  #overlay { 
    display:none; 
    position:absolute; 
    background:#fff; 
  }
  #img-load { 
    position:absolute; 
  }

JavaScript

$t = $("#table");

$("#overlay").css({
  opacity: 0.5,
  top: $t.offset().top,
  width: $t.outerWidth(),
  height: $t.outerHeight()
});

$("#img-load").css({
  top:  ($t.height() / 2),
  left: ($t.width() / 2)
});

$t.mouseover(function(){
   $("#overlay").fadeIn();
});