JSFiddle - React, Tailwind, and code Playground

by Seetpal Singh

HTML

<div class="container">
  <div id="activeBorder" class="active-border">
    <div id="circle" class="circle"></div>
  </div>
</div>

CSS

.container {
  width: 110px;
  height: 110px;
  margin: 100px auto;
}

.circle {
  position: relative;
  top: 5px;
  left: 5px;
  text-align: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #E6F4F7;
}

.active-border {
  position: relative;
  text-align: center;
  width: 110px;
  height: 110px;
  border-radius: 100%;

  background-color: #39B4CC;
  background-image:
    linear-gradient(91deg, transparent 50%, #A2ECFB 50%),
    linear-gradient(90deg, #A2ECFB 50%, transparent 50%);

}

JavaScript

$(function drawSector() {
  var activeBorder = $("#activeBorder");
  var prec = 70
  if (prec > 100)
    prec = 100;
  var deg = prec * 3.6;
  if (deg <= 180) {
    activeBorder.css('background-image', 'linear-gradient(' + (90 + deg) + 'deg, transparent 50%, #A2ECFB 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
  } else {
    activeBorder.css('background-image', 'linear-gradient(' + (deg - 90) + 'deg, transparent 50%, #39B4CC 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
  }

  var startDeg = 0;
  activeBorder.css('transform', 'rotate(' + startDeg + 'deg)');
  $("#circle").css('transform', 'rotate(' + (-startDeg) + 'deg)');
});