JSFiddle - React, Tailwind, and code Playground

by Max Belov

HTML

<div>Click me</div><br>
<div id="spinner"></div>

CSS

#spinner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0.75) url(http://www.marcorpsa.com/ee/images/loading2.gif) no-repeat center center;
  z-index: 10000;
  -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

JavaScript

var button = document.querySelector('div');
var spinner = document.querySelector('#spinner');

function showThing() {
  spinner.style.display = 'block';
    setTimeout(removeThing, 2000)
}

function removeThing() {
  spinner.style.display = 'none';  
}

button.onclick = showThing;