JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.0/circle-progress.js"></script>
<div class="circle-container">
  <div id="circle1" class="circle"></div>
  <div id="circle2" class="circle"></div>
</div>

CSS

.circle-container {
  position: relative;
}
.circle-container .circle {
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

$('#circle1').circleProgress({
    value: 1,
    size: 100,
    fill: { color: "#ff1e41" }
  }).one('circle-animation-end', function() {
  	$('#circle2').circleProgress({
      value: 0.5,
      size: 100,
      fill: { color: "#00ff00" },
      emptyFill: 'rgba(0, 0, 0, 0)'
    })
  });