JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<div id="bar"></div>

<br />
<br />

<a href="#">Click</a>

CSS

#bar{
    height: 10px;
    background: #000;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0;
}

JavaScript

$(document).ready(function() {
    $('#bar').css('width', 0);
    $('a').click(function(e) {
        $('#bar').addClass('extended').animate({
            width: 100 + '%'
        }, 275){
            
        }, function(){
                $('#bar').animate({ width: 0 }, 275);   
        });
        e.preventDefault();
    });

    /*$('a').click(function(e) {
        if ($('#bar').hasClass('extended')) {
            $('#bar').removeClass().animate({
                width: 0
            }, 275);
        }
        e.preventDefault();
    });*/
});