JSFiddle - React, Tailwind, and code Playground

by iamjpg

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<div id="wait"></div>
<button>
  Submit Form
</button>

CSS

#wait {
  display: none;
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba( 255, 255, 255, .8) url('http://i.stack.imgur.com/FhHRx.gif') center center no-repeat;
}

JavaScript

// Mimic Ajax Call
var submitForm = function() {
	$('#wait').show();
  $.ajax({
    method: 'get',
    url: ' https://jsfiddle.net/echo/jsonp/',
    dataType: 'jsonp',
    success: function() {
    	// Mimic wait
      setTimeout(function() {
      	$('#wait').hide();
        alert('DONE!');
      }, 5000)
    }
  })
}

$('button').on('click', submitForm)