How to implement the Animation of the selection of the sector of a circle (filling in the circle with color from 0 to a certain value)?

Can try to make svg can draw on a canvas. jQuery you here not the assistant. Properties of a circle and the circumference.
\rhttps://codepen.io/Profesor08/pen/QQQeJp

make it 2 svg circle
1 circle - unfilled circle
2 circle - simulated filled in, the JavaScript manage the attributes stroke-dasharray, stroke-dashoffset(if necessary), transform to rotate

have stroke-dasharray there is a dash(hell, it will be the filling) and gap(space) their you need to calculate
an example of my code from a project on vuejs

.order-status-wrap svg.order-status(viewBox="0 0 166 166") circle(cx="83" cy="83" r="78" fill="none" stroke="#3a3a3f" stroke-width="10") circle(cx="83" cy="83" r="73" fill="none" stroke="#4dc54f" v-bind:stroke-dasharray="dash+' '+gap" stroke-dashoffset="" stroke-width="5" transform="rotate(-90 83 83)") .order-status-text .order-status-label Order is made on .order-status-percent {{orderPercent}} % \r\r\rexport default {\rdata() {\rreturn {\rorderSteps: 7, // кол-во шагов оформления заказа\rorderStepsComplete: 2, // кол-во пройденных шагов\rcircleRadius: 73, // радиус окружности\r}\r},\rcomputed: {\rorderPercent () { // процент выполнения заказа\rreturn Math.round(this.orderStepsComplete/(this.orderSteps/100))\r},\rcircleLength () { // длина окружности\rreturn this.circleRadius*2*Math.PI;\r},\rdash () { // черта\rreturn this.circleLength/100*this.orderPercent;\r},\rgap () { // пробел\rreturn this.circleLength-this.dash;\r},\r},\r}\r

well, screw the setInterval for animation

Can be done on svg. The fill is essentially a circle half the radius of the super-thick line, with a thickness of half the radius. An example of a fill is not so thick line.