JSFiddle - React, Tailwind, and code Playground

HTML

<div class="loading">Loading</div>
<div id="content"></div>
<br /><br />
<input type="button" id="reload" value="Reload">

CSS

.loading{
    background-color:#000;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:0;
    color:#fff;
   
}

JavaScript

$(document).ready(function() { var container = $('#content');
                               
    function doAjax(url) {
    if (url.match('^http')) {
        $.getJSON("http://query.yahooapis.com/v1/public/yql?" + "q=select%20*%20from%20html%20where%20url%3D%22" + encodeURIComponent(url) + "%22&format=xml'&callback=?", function(data) {
            if (data.results[0]) {
                var fullResponse = $(filterData(data.results[0])),
                    justTable = fullResponse.find("a");
                container.html(justTable);
                    $(this).delay(500).css({
                        "opacity": 0,
                        "pointer-events": "none",
                        "-webkit-transition": "opacity 5s linear"
                    });
            } else {
                var errormsg = 'Error';
                container.html(errormsg);
            }
        });
    } else {
        $('#content').load(url);
    }
}

function filterData(data) {
    data = data.replace(/<?\/body[^>]*>/g, '');
    data = data.replace(/[\r|\n]+/g, '');
    data = data.replace(/<--[\S\s]*?-->/g, '');
    data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g, '');
    data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g, '');
    data = data.replace(/<script.*\/>/, '');
    data = data.replace(/<img[^>]*>/g, '');
    return data;
}
doAjax('http://google.com');
$("#reload").click(function() {
    $('.loading').queue(function() {
        $(this).css({
            "opacity": 1,
            "pointer-events": "none",
            "-webkit-transition": "opacity .5s linear"
        })
        $(this).dequeue();
    });
    doAjax("http://google.com");

});
});