JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fgnass.github.io/spin.js/spin.min.js"></script>
<script src="http://fgnass.github.io/spin.js/jquery.spin.js"></script>
<div id="spinBox"></div>
<button id="btnGetAjax">Get Data (Ajax)</button>
<div id="result"></div>

CSS

#result {
    margin-top: 1em;    
}

#spinBox {
    z-index:999;
    opacity:0.8;
    display:none;
    border-radius:0.25em;
    width:5em;
    height:5em;
    margin: -2.5em 0 0 -2.5em;
    background-color:#f0f3f6;
    border:1px solid #cdcdcd;
    position:fixed;
    top:50%;
    left:50%
}

JavaScript

$('#btnGetAjax').click(function(){
    $('#result').html("Loading in 3 seconds...");
    $('#spinBox').show().spin(); 
    $.ajax({
    method: 'POST',
    url: '/echo/html/',
    data: {
      html: 'Data received!',
      delay: 3
    },
    success: function(data) {
      $('#result').html(data);
      $('#spinBox').hide().spin(false);
    }
  });
});