JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<button>Start Animation</button>

<div id="loadingDiv">Loading please wait...</div>

CSS

#loadingDiv {
 background-color: white;
 height:100px;
 width:100px;
 position:absolute;
}

JavaScript

$(document).ready(function(){
    $("button").click(function(){
    	animate();
    	/*
        $("#loadingDiv").animate({
            left: '250px',
            'opacity': '0.5',
            height: '150px',
            'width': '150px',
            'backgroundColor': 'blue'
        });*/
        
    });    
});

  function animate() {
    //var self = this;
    $('#loadingDiv').animate({'opacity': '0'}, 500, function(){
      $('#loadingDiv').animate({'opacity': '.5'}, 500, function(){
          $('#loadingDiv').animate({'opacity': '1'}, 500, function(){
            //if(!self.state.gridIsLoaded){
              animate();
            //}
          });
      });
    });
  }