JSFiddle - React, Tailwind, and code Playground

by Dexmaster

HTML

<div class="output">waiting for action</div>
<a class="button"> TEST LOADER </a> 
<div class="aj-loader" style="display: none;"></div>

CSS

.button {
    margin: 0.2em;
    text-decoration: none;
    cursor: pointer;
    vertical-align: top;
}
.output {
    margin-top: 8px;
    padding: 1%;
    border: 1px solid #777;
    background-color: #FFF;
}
.aj-loader {
    width: 40px;
    height: 40px;
    display: block;
    background: transparent url('http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/5-1.gif') no-repeat center center;
}

JavaScript

function getAjax() {
    var outp = document.querySelector('.output'),
        aj_loader = document.querySelector('.aj-loader'),
        data = JSON.stringify({
            foo: "bar",
            bar: "foo"
        }),
        request = new XMLHttpRequest();
    aj_loader.style.display = 'block';
    request.open('POST', '/echo/json/', true);
    request.onload = function () {
        if (request.status >= 200 && request.status < 400) {
            aj_loader.style.display = 'none';
            outp.innerHTML = request.responseText;
        }
    };
    request.send("delay=3&json=" + encodeURIComponent(data));
}

document.querySelector('.button').onclick = getAjax;