JSFiddle - React, Tailwind, and code Playground

by bstaley

HTML

<script src="https://rawgit.com/bstaley/aspectorientedajax/master/aOAjax.js"></script>
<p id='text'>Ready For A Request.</p>
<div id="loading">
    <div class="loading-container">
        <div id="ball_1" class="loading-ball"></div>
        <div id="ball_2" class="loading-ball"></div>
        <div id="ball_3" class="loading-ball"></div>
        <div id="ball_4" class="loading-ball"></div>
    </div>
</div>
<button id="send">Make An Ajax Request</button>

CSS

#loading {
    display:none;
}
.loading-container {
    position:fixed;
    left:50%;
    margin-left:-128px;
    top:50%;
    margin-top:-10px;
    width:256px;
    height:20px;
    z-index:30002;
}
.loading-ball {
    background-color:#51AFD1;
    position:absolute;
    top:0;
    left:0;
    width:20px;
    height:20px;
    -moz-border-radius:10px;
    -moz-animation-name:loading-path;
    -moz-animation-duration:2.6s;
    -moz-animation-iteration-count:infinite;
    -webkit-border-radius:10px;
    -webkit-animation-name:loading-path;
    -webkit-animation-duration:2.6s;
    -webkit-animation-iteration-count:infinite;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    -o-animation-name:loading-path;
    -o-animation-duration:2.6s;
    -o-animation-iteration-count:infinite;
    border-radius:10px;
    animation-name:loading-path;
    animation-duration:2.6s;
    animation-iteration-count:infinite;
}
.loading-mask {
    position:fixed;
    background-color:rgba(0, 0, 0, 0);
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:30001;
}
#ball_1 {
    -moz-animation-delay: .5s;
    -o-animation-delay: .5s;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}
#ball_2 {
    -moz-animation-delay:0.76s;
    -webkit-animation-delay:0.76s;
    -o-animation-delay:0.26s;
    animation-delay:0.76s;
}
#ball_3 {
    -moz-animation-delay:1.02s;
    -webkit-animation-delay:1.02s;
    -o-animation-delay:0.52s;
    animation-delay:1.02s;
}
#ball_4 {
    -moz-animation-delay:1.28s;
    -webkit-animation-delay:1.28s;
    -o-animation-delay:0.78s;
    animation-delay:1.28s;
}
@-moz-keyframes loading-path {
    0% {
        left:0px;
        background-color:#51AFD1;
    }
    50% {
        left:236px;
        background-color:#FFFFFF;
    }
    100% {
        left:0px;
        background-color:#51AFD1;
    }
}
@-webkit-keyframes loading-path {
    0% {
        left:0px;
        background-color:#51AFD1;
    }
    50% {
        left:236px;
       ...

JavaScript

var count = 0;
var request3sWait;

new AjaxAspect(function () {
    request3sWait = setTimeout(function(){ document.getElementById('loading').style.display = 'block';},3000);
}, function () {
    clearTimeout(request3sWait);
    document.getElementById('loading').style.display = 'none';
    document.getElementById('text').innerHTML = 'Ready For A Request.';
});

var sendRequest = document.getElementById("send");

sendRequest.onclick = function(){ new MakeAnAjaxRequest();};

var MakeAnAjaxRequest = function () {

    count++;
    document.getElementById('text').innerHTML = 'Processing ' + count + ' Request...';

    /*Used jQuery to generate an ajax request.*/
    $.ajax({
        url: '/echo/json/?' + new Date().getMilliseconds(),
        data: {
            text: 'some text',
            array: [1, 2, 'three'],
            object: {
                par1: 'another text',
                par2: [3, 2, 'one'],
                par3: {}

            },
            delay: 4
        },
        success: function () {
            count--;
            if(count !== 0){
            document.getElementById('text').innerHTML = 'Processing ' + count + ' Request...';
            }
        }
    });

}