JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "progressBar">
        <div class = "background">0%</div>
        <div class = "container">
            <div class = "foreground">0%</div>
        </div>
    </div>
    <button>Play</button>

CSS

*:not(button) {
        padding: 0;
        margin: 0;
        border: 0;
        box-sizing: border-box;
    }
    
    body {
        padding: 10px;
    }
    
    .progressBar {
        width: 150px;
        height: 15px;
        border: 1px solid #000;
        position: relative;
        margin-bottom: 5px;
    }
    
    .progressBar .background,
    .progressBar .foreground {
        width: 150px;
        height: 13px;
        font: normal 10px/13px Sans-Serif;
        text-align: center;
    }
    
    .progressBar .container {
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        overflow: hidden;
    }
    
    .progressBar .foreground {
        background-color: navy;
        color: yellow;
    }

JavaScript

$(function() {
        $("button").click(function() {
            var start = 0;
            var interval = setInterval(function() {
                if(start >= 100) clearInterval(interval);
                $(".progressBar").find(".background, .foreground")
                                 .text(start + "%")
                                 .end()
                                 .find(".container")
                                 .css("width", start++ + "%");
            }, 10);    
        });
    });