JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div id="progress">
 <div id="display"></div>
 <!-- Adjust the number of <span>'s as desired; also try adding images -->
 <span style="color:#08f">&bull;</span>
 <span style="color:#08e">&bull;</span>
 <span style="color:#08d">&bull;</span>
 <span style="color:#08c">&bull;</span>
 <span style="color:#08b">&bull;</span>
 <span style="color:#08a">&bull;</span>
 <span style="color:#079">&bull;</span>
 <span style="color:#068">&bull;</span>
 <span style="color:#067">&bull;</span>
 <span style="color:#066">&bull;</span>
 <span style="color:#055">&bull;</span>
 <span style="color:#054">&bull;</span>
 <span style="color:#053">&bull;</span>
 <span style="color:#052">&bull;</span>
 <span style="color:#051">&bull;</span>
</div>

<div id="slider"></div>

CSS

#slider {
 position: absolute;
 top: 300px;
 left: 110px;
 width: 190px;
}
#progress {
 background: #ddd;
 position: relative;
 top: 50px;
 left: 100px;
 width: 200px;
 height: 200px;
 overflow: hidden;
}
#progress span {
 position: absolute;
 left: -50px;
 top: 0;
 padding: 0;
 margin: 0;
 border: 0;
}
#display {
 position: absolute;
 top: 95px;
 left: 90px;
 font-size: 16px;
}

JavaScript

$(document).ready(function(){
 var progressConstants = {
  radius    : 50,
  centerX   : 100,
  centerY   : 100,
  sizeStart : 80,
  sizeDec   : 4,
  // In the quadrant system, 75% is the top of the circle ( x = 0 & y = max )
  startPos  : 75,
  // get number of children in the indicator & space them equally around the circle
  points    : 2 * Math.PI / $('#progress span').length
 };
 var progressIndicator = function(percent, c){
  var angle = ( ((360*(percent + c.startPos)/100)%360) * Math.PI / 180 );
  $('#display').text(percent);
  $('#progress span').each(function(i){
   var x = c.radius * Math.cos(angle) + c.centerX,
       y = c.radius * Math.sin(angle) + c.centerY,
       // each point in the circle is decreased in size
       fSize = c.sizeStart - i * c.sizeDec;
       // adjust angle of each point in the circle
       angle += -(c.points);
   
  $(this)
   .css({
    fontSize : fSize + 'px',
    left     : x - fSize/4,
    top      : y - fSize/2
   })
   // if using images, adjust size of children
   .children().css({
    height : fSize + 'px',
    width  : fSize + 'px'
   });
 });
 };
 // initialize indicator
 progressIndicator(0,progressConstants);
 // setup slider
 $('#slider').slider({
  slide: function(e,ui){ progressIndicator( ui.value, progressConstants ); }
 });
});