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">
  <span  class="msg">aaa</span>
  <div class="line">
  
  </div>
  </img>
</div>

CSS

.line {
    border: 1px solid;
    position: absolute;
    left: 90px;
    width: 20%;
    text-align:top;
}
.msg {
  position: absolute;
    left: 90px;
    width: 20%;
    text-align:top;
}

.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;
    }

JavaScript

function fillMeter(percent) {
      var pixels = (percent/100) * 90;
      $(".fill").css('top', (90-pixels) + "px");
      $(".line").css('top', (90-pixels) + "px");
      $(".msg").css('top', (75-pixels) + "px");
      $(".fill").css('height', pixels + "px");
      
      if(percent < 25) {
      	$(".msg").text("Beginner");
        $(".fill").css("background-color","orange");
      } else if(percent >= 25 && percent < 50) {
				$(".msg").text("Intermediate");
        $(".fill").css("background-color","yellow");
      } else if(percent >= 50 && percent < 75) {
      	$(".msg").text("Expert");
        $(".fill").css("background-color","blue");
      } else if(percent >= 75) {
      	$(".msg").text("All star");
        $(".fill").css("background-color","green");
      }
      
}

fillMeter(22);