JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div class="bottom">
            <div class="left">
                <input id="hide_button" type="button" value="hide/show" />
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
                <input id="filter1" type="button" value="filter1" />
                <p> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <input id="filter2" type="button" value="filter2" />
                <p> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <input id="filter3" type="button" value="filter3" />
                <p> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <input id="filter4" type="button" value="filter4" />
                <p> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>                
                
            </div>
            
            <div class="right">
                <img id="img_loading" src="http://i.stack.imgur.com/FhHRx.gif" />
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore...

CSS

.header {
    background-color: Green;
    width: 100%;
    margin-bottom: 20px;
}
.left {
    background-color: Red;
    float: left;
    width: 100px;
}
.left_hided .left{
    margin-left: -85px;
}
.right {
    background-color: ;
    width: calc(100% - 140px);
    float: right;
    background: Aqua url("http://i.imgur.com/ifyW4z8.png") 50% repeat-y;
}

.loading{
    opacity: 0.4;
}

.left_hided .right{
     width: calc(100% - 55px);
}
p {
    padding-top: 10px;
}
input{
    float:right;
}

#hide_button {
    margin-right: -20px;
}

#img_loading {
    display: none;
}

.loading #img_loading {
    position: fixed;
    top: 50%;
    left: 50%;
    display: block;
}

JavaScript

function loadNewContent(){
     //here will be $(".right").load("new_conent");
    $(".right").removeClass("loading")
}

$(document).ready(function () {
    
    alert("The question is, how to style #img_loading, that it always appear on the middle of the screen and on the black bar.");
    
    $("#hide_button").on("click", function () {
        $(this).closest(".bottom").toggleClass("left_hided");
    });
    
    $("#filter1,#filter2,#filter3,#filter4").on("click", function() {
       $(".right").addClass("loading");
       setTimeout(loadNewContent, 2000);
    });
});