JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div class="progress progress-outer" data-progress="10">
  <span></span>
</div>

<div class="progress progress-inner" data-progress="30">
  <span></span>
</div>

CSS

.progress {
  width: 100px;
  height: 100px;
  /* Lightblue gradient */
  background-image: conic-gradient(
    transparent var(--min-degrees),
    #E8F6FD var(--min-degrees) var(--max-degrees),
    transparent var(--max-degrees)
  );
  border-radius: 50%;
  transform: rotate(180deg); /* Rotate whole element to start from center bottom */
  position: relative;
}

.progress::before {
  content: "";
  width: 100%;
  height: 100%;
  /* Darkblue gradient */
  background-image: conic-gradient(
    transparent var(--min-degrees),
    #00ACEE var(--min-degrees) var(--progress, 0),
    transparent var(--progress, 0)
  );
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
}

/* White circle on top to make it look like a cutout */
.progress::after {
  content: "";
  width: 75px;
  height: 75px;
  left: 12.5px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #FFF;
  border-radius: 50%;
}

JavaScript

const loaderOuter = document.querySelector('.progress-outer');
const loaderInner = document.querySelector('.progress-inner');

const percentageOuter = parseInt($('.progress-outer').attr("data-progress"));
const percentageInner = parseInt($('.progress-inner').attr("data-progress"));

const MIN = 30;
const MAX = 330;

// Set CSS properties
loaderOuter.style.setProperty('--min-degrees', `${MIN}deg`);
loaderOuter.style.setProperty('--max-degrees', `${MAX}deg`);

loaderInner.style.setProperty('--min-degrees', `${MIN}deg`);
loaderInner.style.setProperty('--max-degrees', `${MAX}deg`);

function updateProgressOuter(percent) {
  const degrees = (percent * (MAX - MIN) / 100) + MIN;
  loaderOuter.style.setProperty('--progress', `${degrees}deg`);
}

function updateProgressInner(percent) {
  const degrees = (percent * (MAX - MIN) / 100) + MIN;
	loaderInner.style.setProperty('--progress', `${degrees}deg`);
}


// Something is loading down here ...
var percentOuter = 0;
var percentInner = 0;

var myIntervalOuter = setInterval(
function(){
 percentOuter = (percentOuter + 1) % 100;
  updateProgressOuter(percentOuter);
  if(percentOuter === percentageOuter){
  	 clearInterval(myIntervalOuter);
  }
}, 1000 / 30);

var myIntervalInner = setInterval(
function(){
 percentInner = (percentInner + 1) % 100;
  updateProgressInner(percentInner);
  if(percentInner === percentageInner){
  	 clearInterval(myIntervalInner);
  }
}, 1000 / 30);