JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<div id="timer">   </div>
<span class="ontimer">recomecar</span>

CSS

#timer{
    width: 0%;
    height: 50px;
    background:green;
    margin-bottom:20px;
}
.ontimer{
    padding:10px 50px;
    background:blue;
    color: #fff;
    cursor:pointer;
}

JavaScript

$(document).ready(function(){

    $timer = $('#timer')

    function carregar(){
        $timer.animate({"width": "100%"}, 5000,'linear');
        $timer.promise().done(restart);
    }

    function restart(){
        $timer.animate({"width": "0%"}, 0,'linear');
        $timer.promise().done(carregar);
    }
    carregar();
    
    $( ".ontimer" ).click(function() {
	  	$("#timer") .stop(); //reiniciar a animação do timer
	});

});