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() {
    $('.aj-loader').show();
    $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: {
            json: JSON.stringify({
                foo: "bar",
                bar: "foo"
            }),
            delay: 3
        },
        complete: function (response) {
            $('.output').html(response.responseText);
            $('.aj-loader').hide();
        }
    });
    return false;
}

$('.button').click(getAjax);