JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div id="outer-progress">
  <div id="inner-progress" value="0" max="100"></div>
  <span class="progress-value">0%</span>
</div>

CSS

#outer-progress {
    background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_background.png);
    background-color: transparent;
    border: 0;
    height: 100px;
    width: 100px;
    position: relative;
}

#inner-progress {
  background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_bar.png);
  background-color: transparent;
  width: 100%;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  height: 0%;
}

.progress-value {
  color: #FFF !important;
  font-weight: bold;
  position: absolute;
  top: 40%;
  left: 40%;
}

JavaScript

$(document).ready(function() {
  $('#inner-progress').animate({
    height: '100%'
  }, 1500, function() {
  	$('#inner-progress').css('background-image','url(https://www.novilar.com/img/battle/ui/purification_meter_done.png)');
  });
});