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>

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

JavaScript

function fillMeter(percent) {
      var pixels = (percent/100) * 90;
      $(".fill").css('top', (90-pixels) + "px");
      $(".fill").css('height', pixels + "px");
}

fillMeter(82);