JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        
        <title>Jquery Mobile overlay loading</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        
    </head>
    <body>
        
        <div data-role="page">
            <div data-role="header">
                <h1>Header Page 1</h1>
            </div><!-- /header -->
            <div data-role="content">
                <button>Button</button>
            </div><!-- /content -->
            <div data-role="footer">
                <h4>Footer Page 1</h4>
            </div><!-- /footer -->
        </div><!-- /page -->
        
        <div class="ui-loader-background"> </div>
    </body>
</html>

CSS

.ui-loader-background {
    width:100%;
    height:100%;
    top:0;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.3);
    display:none;
    position: fixed;
    z-index:100;
}

.ui-loading .ui-loader-background {
    display:block;
}

JavaScript

$(function () {
    $('body').append("<div class='ui-loader-background'> </div>");
    
    $('button').toggle(function () {
        $.mobile.showPageLoadingMsg();
    }, function () {
        $.mobile.hidePageLoadingMsg();
    });
});