JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
  <div class="fill"></div>
  <img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png"></img>
</div>
<div class="text" >_____________________ </div>

CSS

.fill {
      position: absolute;
      top: 90px;
      left: 0;
      height: 0px;
      width: 90px;
      background-color: green;
      overflow:hidden;
    }
    .mask {
      display: block;
      height: 90px;
      left: 0;
      position: absolute;
      top: 0;
      width: 90px;
      overflow:hidden;
    }
    .text {
      position: absolute;
      top: 0;
      left: 90px;
    }

JavaScript

function fillMeter(percent) {
      var pixels = (percent/100) * 90;
      $(".fill").css('top', (90-pixels) + "px");
      $(".fill").css('height', pixels + "px");
		  $(".text").css('top', (80-pixels) + "px"); 
      	var texto = ""
      if (percent > 90) {
        texto = "All-Star";
      } else if ( percent < 90 & percent > 75) {
        texto = "Expert";
      } else if ( percent < 75 & percent > 25) {
      	texto = "<u>Intermediate</u>";
      } else if (percent < 25) {
      	texto = "Begginer";
      }

      $(".text").html("<u>_____________"+texto+"<u>")

}



fillMeter(70);