JSFiddle - React, Tailwind, and code Playground

HTML

<div class="progress_container">
    <div id="progress"></div>
    <div class="progress_bar tip" title="99%"></div>
</div>

CSS

#progress {
    color: white;
    position: absolute;
    left: 50%;
}
.progress_container {
    height:25px;
    border-radius: 3px;
    overflow:hidden;
    background:red;
    width: 100%;
}
.progress_bar {
    color: #fff;
    height:25px;
    width: 0px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    background:black;
}
.progress_container {
    margin-bottom: 30px;
}
}

JavaScript

$("document").ready(function () {

    // animate the progress bar onload

    $('.progress_bar').each(function () {
        $(this).animate(
          {
             width: this.title
          }, {
            duration: 1000,
            step    : function( current ) {
                        $('#progress').html(parseInt(current, 10)+'%')
            }
        });
    });
});