JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<p><span>loading...</span></p>

<a href="#" id="btn">STOP</a>

CSS

p {
    margin-bottom: 50px;
    color: #555;
    font-size: 160%;
    font-weight: bold;
}

JavaScript

var _timer;
var _timerArr = [];

var loaderBlink = function() {
    $('p').find('span').fadeTo(200,.4).fadeTo(200,1,function() {
        _timer = setTimeout(function() { loaderBlink() }, 200);
        _timerArr.push(_timer);
        console.log('loading...');
    });
};

$('#btn').on('click', function() {
    
    $.each(_timerArr, function(i,val) {
        clearTimeout(val);
        console.log(val);
    });
    
    $(this).remove();
    $('p').fadeOut('fast');
    
    return false;
});

loaderBlink();