JSFiddle - React, Tailwind, and code Playground
HTML
<div class="group">
<div class="container">container</div>
<div id="loading-img"></div>
<button id="button">Submit</button>
</div>
CSS
#loading-img {
background: url("http://www.chimply.com/images/samples/classic-spinner/animatedEllipse.gif") center center no-repeat;
display: none;
height: 100px;
width: 100px;
position: absolute;
top: 33%;
left: 1%;
right: 1%;
margin: auto;
}
.container{
height: 300px;
background: #000;
color: #fff;
}
.group {
position: relative;
width: 100%;
}
JavaScript
$("#button").click(function() {
$(".container").css("opacity", 0.2);
$("#loading-img").css({"display": "block"});
});