JSFiddle - React, Tailwind, and code Playground

HTML

<button>Go</button>
<p>Waiting</p>
<div id="bar" class="progress-bar">
    <div class="progress-bar-fill"></div>
</div>

CSS

.progress-bar {
    background-color: #EEE;
    height: 10px;
    overflow: hidden;
    width:100%;
}
.progress-bar-fill {
    background-color: green;
    height: 100%;
    transition: width 5s ease 0s;
    width: 0;
}

JavaScript

$("button").on("click", function () {
    $("p").append(" --> Started");
    $('#bar .progress-bar-fill').css('width', '100%');
    $('#bar .progress-bar-fill').promise().done(function () {
        $("p").append(" --> Finished");
    });
});