Draw Circle CSS

HTML

<div class="sector"></div>

CSS

div {
    width: 5em;
    height: 5em;
    display: block;
    border-radius: 50%;
    background-color: #000;
    border: 2px solid green;
    float: left;
    margin: 1em;
}

.ten {
    background-image:
        linear-gradient(210deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

.ten {
    background-image:
        linear-gradient(90deg, transparent 50%, green 50%),
        linear-gradient(330deg, transparent 50%, white 50%);
}

.ten {
    background-image: none;
}

JavaScript

function drawCircle(value, total) {
    var angle = Math.round((value / total) * 360);
        
    var bg = "";
    if(angle <= 180) {
        bg += "linear-gradient(" + (angle + 90) + "deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%)"
    } else {
        bg += "linear-gradient(90deg, transparent 50%, green 50%), linear-gradient(" + (angle - 90) + "deg, white 50%, transparent 50%)"
    }

    $(".sector").css("background-image", bg);
}

drawCircle(9, 10);