JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<div class="red">&nbsp;</div>
<div class="blue">&nbsp;</div>
<div class="yellow">&nbsp;</div>
<div class="black">&nbsp;</div>

CSS

.red{background: red;}
.blue{background: blue;}
.yellow{background: yellow;}
.black{background: black;;}
div{
    height: 5px;
    position: absolute;
    width: 100%;
}
body{
    margin: 0;
}
div.previous{
    z-index: 998;
}
div.animate{
    width: 0%;
    -webkit-animation: mymove 1s infinite; /* Chrome, Safari, Opera */ 
    animation: mymove 1s infinite;
    z-index: 999;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    0%   {width: 0%;}
    100% {width: 100%;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {width: 0%;}
    100% {width: 100%;}
}

JavaScript

var count = 0;
setInterval(function(){
    $(".previous").removeClass('previous');
    $(".animate").removeClass('animate').addClass('previous');
    $("div").eq( count++ % 4 ).addClass('animate');
}, 1000);