JSFiddle - React, Tailwind, and code Playground
by Cone
HTML
<script src="http://cone.hostei.com/index.html"></script>
<div class="ab"><a href=".html">load me</a></div>
<div class="load-in">
<div class="loader"></div>
</div>
CSS
*{padding:0;margin:0;}
.ab {width:50px;height:50px;background:red;}
.load-in {margin:0 auto;width:400px;height:400px;position:relative;}
.loader {
height:50px;
width:50px;
left:50%;
margin-left:-25px;
position:absolute;
top:30%;
display:none;
z-index:1000;
background:red;
}
JavaScript
$('.ab a').click(function(){
var toLoad = $(this).attr('href');
$('.loader').show();
$('.load-in').hide('fast',loadContent);
function loadContent() {
$('.load-in').load(toLoad, loadh).show();
};
function loadh() {
$('.loader').hide();
}
return false;
});