JSFiddle - React, Tailwind, and code Playground

by Chris Davis

HTML

<div class="loader hidden" id="loading">
    <span class="loader-text">Loading...</div>
</div>

<div>
    Website Content
    <a href="http://google.com" class="external-link">Click me!</a>
    <a href="http://yahoo.com" class="external-link">Or me!</a>
</div>

CSS

.hidden {
    display:none;
}
.loader {
    position:fixed;
    height:100%;
    width:100%;
    background-color: grey;
    opacity:0.5;
}
.loader-text {
    position:fixed;
    top:45%;
    left:45%;

}

JavaScript

var delay = 2000;
var els = document.getElementsByClassName('external-link');
var loader = document.getElementById('loading');
for(var i = 0;i < els.length;i++){    
    els[i].addEventListener('click', function(e) {  
        var source = e.target || e.srcElement;
        e.preventDefault();        
        loader.className = loader.className.replace('hidden', '');
        
        setTimeout(function() {             
            window.open(source.href);            
            loader.className += 'hidden';
        }, delay);
    }, false);
}