JSFiddle - React, Tailwind, and code Playground
by Victor Alekseev
HTML
<div id="loader">
<img src="http://proprofit.pp.ua/wp-content/uploads/2016/03/loading-animation.gif" />
</div>
<div id="content">
<div id="header">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</div>
<h1>Заголовок</h1>
<p>Текст на странице сайта</p>
</div>
CSS
* {
margin:0 auto;
padding:0;
}
#header{
background:#ccc;
height:50px;
width:100%;
margin-bottom:25px;
}
ul {width:100%}
li {
list-style:none;
display:inline-block;
line-height:50px;
padding:0 10px;
margin:0 10px;
}
h1 {margin-bottom:15px}
#loader {
display:block;
position:absolute;
height:100%;
width:100%;
background:#fff
}
#loader img {
margin:150px 250px;
}
JavaScript
$('#loader').css({'display' : 'none'});