JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="bar" data-percentage="0%">
  <div class="inner-bar"></div>
</div>

CSS

#bar {
  background-color: #e67e22;
  width: 400px;
  height: 20px;
  padding: .5em;
  position: relative;
  
  &::after {
    content: attr(data-percentage);
    position: absolute;
    font-family: Arial;
    color: #fff;
    font-size: 10px;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    text-align: center;
  }
  
  .inner-bar {
    background-color: #d35400;
    width: 100%;
    height: 100%;
  }
}

JavaScript

$("#bar").mousemove(function(e){
    var 
    	perc = e.offsetX / $(this).width() * 100,
      percentage = perc.toFixed(2) + "%";
      
    $(this).attr('data-percentage', percentage);
    $(this).find('.inner-bar').css('width', percentage);
});