JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<div class="loaderCont"><div id="loader"></div></div>
  <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" />
			 <input id="filter1" type="button" value="filter1" />
			 <input id="filter2" type="button" value="filter2" />
			 <input id="filter3" type="button" value="filter3" />
			 <input id="filter4" type="button" value="filter4" />	 
		</div>
		
		<div class="right">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus arcu, elementum vitae risus id, imperdiet mattis eros. Vestibulum risus justo, tristique id elit in, varius egestas felis. Nunc tincidunt bibendum erat, quis accumsan libero ultricies blandit. Etiam hendrerit sit amet ante sit amet viverra. Donec laoreet orci vel est sollicitudin malesuada. Donec eu urna sed orci rhoncus lacinia. Nam congue at sem et feugiat. Praesent magna eros, accumsan id sodales ac, ultricies id leo.</p><p>

Sed et pretium nisl. Fusce lobortis luctus lectus quis condimentum. Maecenas a felis accumsan mi molestie malesuada sit amet ut mauris. Vestibulum sed ligula euismod, adipiscing lectus ac, eleifend orci. Nunc nisl lectus, lacinia in vestibulum ac, mattis gravida leo. Proin volutpat, ligula a sagittis varius, lorem arcu pellentesque justo, ac sagittis mi lorem et nibh. Sed ac augue non elit malesuada vulputate. Aliquam ut nulla placerat, pretium lectus quis, ornare purus. Maecenas tincidunt at quam quis lacinia. Mauris vel semper magna. In dapibus erat augue.</p><p>

Pellentesque nisi nisi, varius ultrices luctus ac, imperdiet eget eros. Vestibulum a varius erat, vel bibendum lorem....

CSS

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

.left_hided .right{
     width: calc(100% - 55px);
}

input{
    float:right;
}

.loaderCont {
	background-color: rgba(255, 0, 0, 0.6);
	height: 100%;
	width: calc(100% - 140px);
	position: fixed;
	right: 0;
	top: 0;
	z-index: -1;
}

.left_hided2 {
     width: calc(100% - 55px);
}

#loader {
	background: url(http://i.stack.imgur.com/FhHRx.gif) no-repeat center center;
	position: relative;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
    display: block;
	 height: 32px;
	 width: 32px;
}

.loading {
	z-index: 9001;
}

JavaScript

function loadNewContent(){
 $(".loaderCont").removeClass("loading")
}

$(document).ready(function () {
 
 $("#hide_button").on("click", function () {
	  $(this).closest(".bottom").toggleClass("left_hided");
	  $(".loaderCont").toggleClass("left_hided2");
 });
 
 $("#filter1,#filter2,#filter3,#filter4").on("click", function() {
	 $(".loaderCont").addClass("loading");
	 setTimeout(loadNewContent, 2000);
 });
});