JSFiddle - React, Tailwind, and code Playground

HTML

<div id="load-bar-frame">
  <div id="load-bar"></div>
</div>

CSS

#load-bar-frame {
  height: 100px;
  width: 100px;
  border-radius: 100%;
  padding: 3px;
  border: 1px solid #000;
  margin: 20px auto 0 auto;
  display: block;
  position: absolute;
  top 20px;
  left: 20px;
}

#load-bar {
  width: 100%; /* in this case 20% would be the current progress */
  height: 100%;
  border-radius: 100%;
  background: linear-gradient(to right, #00000 10%, #feffff 10%, #feffff 100%);
  overflow:hidden;
}

JavaScript

/* var per = 0;

setInterval(function(){ 

    per++;

    if(per <= 100){

        $('#load-bar').css({background: "linear-gradient(to right, #000000 "+per+"%,#feffff "+per+"%,#feffff 100%)"});

       

    }



}, 100); */