JSFiddle - React, Tailwind, and code Playground

by Harmonix Motion

HTML

<div id="loading-bg"></div>
<img id="loading-image" src="http://zundapps.com/content/images/large_%20loader.gif" alt="">

Click "Run" to see the animation in action.

CSS

#loading-bg {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.4);
          z-index: 500;
        }
        
        #loading-image {
          position: fixed;
          top: 50%;
          left: 50%;
          margin: -75px;
          z-index: 510;
        }

JavaScript

$(function() {
  $('#loading-bg').hide();
  $('#loading-image').hide();

  $(window).on('beforeunload', function() {
    $('#loading-bg').show();
    $('#loading-image').show();
  });
});