JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<span>-.-</span>
<span>o.-</span>
<span>o.o</span>
<span>O.o</span>
<span>O.O</span>
<span>o.O</span>
<span>o.o</span>
<span>-.o</span>

CSS

span{
    position: absolute;
    height: 20px;
    width: 50px;
    text-align: center;
    display: none;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.this{
    display: block;
}

JavaScript

var f = document.querySelectorAll('span');
var i = 0;
(function(){
    function animate(){
        if(document.querySelector('.this')) document.querySelector('.this').className = "";
        console.log(f[i])
        f[i].className = "this";
        i = f[i+1] ? i+1 : 0;
    }
    
    setInterval(animate, 100);
    
}())