JSFiddle - React, Tailwind, and code Playground

by AlexMcP

HTML

<div id='demo'></div>

CSS

div {
    font: monospace;
    margin-bottom: 20px;
}

JavaScript

var spinners = [
    ['pd', 'bq', 'dp', 'qb'],
    ['/', '-', '\\', '|'],
    ['<-&nbsp;&nbsp;&nbsp;>', '<&nbsp;-&nbsp;&nbsp;>', '<&nbsp;&nbsp;-&nbsp;>', '<&nbsp;&nbsp;&nbsp;->', '<&nbsp;&nbsp;-&nbsp;>', '<&nbsp;-&nbsp;&nbsp;>'],
    ['.', 'o', 'O', '@', '*'],
    ['▁', '▃', '▄', '▅', '▆', '▇', '█', '▇', '▆', '▅', '▄', '▃'],
    ['▉', '▊', '▋', '▌', '▎', '▏', '▎', '▍', '▌', '▋', '▊', '▉'],
    ['┤', '┘', '┴', '└', '├', '┌', '┬', '┐'],
    ['⣾', '⣽', '⣻', '⢿', '⡿', '⣟', '⣯', '⣷'],
    ['>))\'>', '&nbsp;>))\'>', '&nbsp;&nbsp;>))\'>', '&nbsp;&nbsp;&nbsp;>))\'>', '&nbsp;&nbsp;&nbsp;&nbsp;>))\'>', '&nbsp;&nbsp;&nbsp;&nbsp;<\'((<', '&nbsp;&nbsp;&nbsp;<\'((<', '&nbsp;&nbsp;<\'((<', '&nbsp;<\'((<', '<\'((<']
];

var start = function (spinnersArray) {
    var i = 0;
    var node = document.createElement('div');
    document.body.appendChild(node);

    setInterval(function () {
        node.innerHTML = spinnersArray[i];
        i == spinnersArray.length - 1 ? i = 0 : i++
    }, 150);
}

for (var i = 0; i < spinners.length; i++) {
    start(spinners[i]);
}