JSFiddle - React, Tailwind, and code Playground

HTML

<div class="progress-bar">
    <div class="progress"></div>
    <span class="bucks-left">$<span id="bl">10000</span></span>
    <span class="bucks-right">$<span id="br">3000</span></span>
    <span class="percents"><span id="prcnts">30</span>%</span>
</div>

CSS

*{
    margin: 0;
    padding: 0;
}

.progress-bar{
    position: relative;
    margin: 10px;
    width: 200px;
    height: 20px;
    background: red;
    font-family: Arial;
    font-size: 10px;
    color: #000;
}

.progress{
    -webkit-transition: width .5s ease;
    -moz-transition: width .5s ease;
    -ms-transition: width .5s ease;
    -o-transition: width .5s ease;
    width: 140px;
    height: 17px;
    overflow: hidden;
    padding: 3px 5px 0 5px;
    background: #CCC;
}

.progress-bar:hover{
    cursor: default;
}

.bucks-left, .bucks-right, .percents{
    position: absolute;
    top: 3px;
}

.bucks-left{
    left: 5px;
}

.bucks-right{
    right: 5px;
}

.percents{
    width: 100%;
    text-align: center;
}

JavaScript

(function($) {
    $.fn.animateNumber = function(to) {
        var $ele = $(this),
            num = parseInt($ele.html()),
            up = to > num,
            num_interval = Math.abs(num - to) / 90;

        var loop = function() {
            num = up ? Math.ceil(num+num_interval) : Math.floor(num-num_interval);
            if ( (up && num > to) || (!up && num < to) ) {
                num = to;
                clearInterval(animation)
            }
            $ele.html(num);
        }

        var animation = setInterval(loop, 5);
    }
})(jQuery)

$(function(){
    var percentLayer = $("#prcnts"),
        bucksRight = $("#br");
    $('.progress-bar').hover(function(){
       $('.progress').stop().animate({"width": "60px"}, 150);
       bucksRight.animateNumber(7000);
       percentLayer.animateNumber(70);
    }, function(){
       $('.progress').stop().animate({"width": "140px"}, 150);
       bucksRight.animateNumber(3000);
       percentLayer.animateNumber(30);
    });
});