JSFiddle - React, Tailwind, and code Playground

by Seetpal Singh

HTML

<div class="container">
    <div id="activeBorder" class="active-border">
        <div id="circle" class="circle">
            <span class="prec">66</span>
            <span id="startDeg" class="90"></span>
        </div>
    </div>
</div>

CSS

.container{
    width: 110px;
    height: 110px;
    margin: 100px auto;
}
.prec{
    top: 30px;
    position: relative;
    font-size: 30px;
}

.prec:after{
    content:'%';
}

.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 = $("#startDeg").attr("class");
    activeBorder.css('transform','rotate(' + startDeg + 'deg)');
    $("#circle").css('transform','rotate(' + (-startDeg) + 'deg)');
});