JSFiddle - React, Tailwind, and code Playground

HTML

<div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;">
    <img src="https://www.drupal.org/files/issues/ajax-loader.gif"></img>
</div>
<button id="btnStart" type="button">Start</button>
<button id="btnStop" type="button">Stop</button>

JavaScript

$(document).ajaxStop(function(){
            console.debug("ajaxStop");
            $("#ajax_loader").hide();
         });
         $(document).ajaxStart(function(){
             console.debug("ajaxStart");
             $("#ajax_loader").show();
         });
        $('#btnStart').click(function(e)  {
            console.debug("click start");
            jQuery.event.trigger("ajaxStart");
            e.preventDefault();
        });
        $('#btnStop').click(function(e)  {
            console.debug("click stop");
            jQuery.event.trigger("ajaxStop");
            e.preventDefault();
        });