JSFiddle - React, Tailwind, and code Playground

by Ankit Singhania

HTML

<body>
    <div class="content">
        Long Content Here
        <br/>
        Click to view loading image.
    </div>
    <div id="divLoading"> 
    </div>
</body>

CSS

#divLoading
{
    display : none;
}
#divLoading.show
{
    display : block;
    position : fixed;
    z-index: 100;
    background-image : url('http://loadinggif.com/images/image-selection/3.gif');
    background-color:#666;
    opacity : 0.4;
    background-repeat : no-repeat;
    background-position : center;
    left : 0;
    bottom : 0;
    right : 0;
    top : 0;
}
#loadinggif.show
{
    left : 50%;
    top : 50%;
    position : absolute;
    z-index : 101;
    width : 32px;
    height : 32px;
    margin-left : -16px;
    margin-top : -16px;
}
div.content {
   width : 1000px;
   height : 1000px;
}

JavaScript

$(document).ready(function(){
    $("div.content").click(function(){
        $("div#divLoading").addClass('show');
    });
});