JSFiddle - React, Tailwind, and code Playground
HTML
<div id="loader"></div>
<div id="content">
<a href="./">Link 1</a>
<a href="./">Link 2</a>
<br>
Content, Zeit:
<script type="text/javascript">
document.write(new Date());
</script>
</div>
CSS
body {
background:black;
color:white;
}
a { color:white; }
#content { display:none; }
#loader {
width:46px;
height:46px;
margin-top:-23px;
margin-left:-23px;
position:absolute;
left:50%;
top:50%;
background:url(http://jquerymobile.com/demos/1.1.1/css/themes/default/images/ajax-loader.gif);
}
JavaScript
$(function loader() {
$('#loader').fadeOut(300);
$('#content').fadeIn(300);
$('body').on('click', 'a', function(ev) {
var href=$(this).attr('href');
$('#loader').fadeIn(300);
$('#content').fadeOut(300, function() {
location.href=href;
});
ev.preventDefault();
});
});