JSFiddle - React, Tailwind, and code Playground

by blesh

HTML

<div id="loading">loading</div>
<br />
<br />
<button>toggle loading</button>

JavaScript

function charString(char, count) {
   var i = 0,
       s = '';
    while(i++ < count) {
        s += char;
    }
    return s;
}


function loadingOn(elem, message) {
    var periodCount = 0;
    message = message || 'loading';
    var interval = setInterval(function () {
        var periods = charString('.', periodCount);
        $(elem).text(message + periods);
        periodCount = ++periodCount % 4
    }, 500);
    return function () {
        clearInterval(interval);
    };
};

var off = null;

$('button').on('click', function(){
    if(off) {
        off();
        off = null;
    } else {
        off = loadingOn('#loading');   
    }
});