JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<div id="loading">L<span id="animation">oo</span>king</div>

CSS

#loading {
    width: 100px;
    padding: 5px;
    background-color: #fff;
    color: #000;
    font-family: Verdana;
    font-size: 0.9em;
    border: solid 1px #ccc;
}

#animation {
    color: #000;
}

JavaScript

function showLoading () {
    var div = document.getElementById("animation"),
        faces = ["o.O", "O.o", "o.o", "O.O"]; 
    
    if (div.innerHTML.length >= 9) {
      div.innerHTML = "";
    }
    
    setTimeout(function () {
        div.innerHTML = faces[(Math.random() * 4) >> 0];
        showLoading();
    },
    100);
}

showLoading();