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

Question

JavaScript

Figuratively, the process can be illustrated by the example of an arrow clock: one hand is stationary, the other moves to a certain value and the space between them is filled with color (there are no arrows, this is just a figurative visualization of the borders).

Answer 1

You can try on svg, you can draw on canvas. jQuery is not your friend here. Properties of a circle and a circle to help.
https://codepen.io/Profesor08/pen/QQQeJp

Answer 2

make svg in it 2 circle
1 circle - unfilled circle
2 circle - imitate the filling, manage the attributes stroke-dasharray, stroke-dashoffset (if necessary) with a javascript, transform for rotation
, stroke-dasharray has a dash (a dash - this will be the filling) and gap(space) you need to calculate
the example of my code from the vuejs project

<template lang="pug">
  .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-status-percent {{orderPercent}} %
</template>

<script>
  export default {
    data() {
      return {
        orderSteps: 7, // кол-во шагов оформления заказа
        orderStepsComplete: 2, // кол-во пройденных шагов
        circleRadius: 73, // радиус окружности
      }
    },
    computed: {
      orderPercent () { // процент выполнения заказа
        return Math.round(this.orderStepsComplete/(this.orderSteps/100))
      },
      circleLength () { // длина окружности
        return this.circleRadius*2*Math.PI;
      },
      dash () { // черта
        return this.circleLength/100*this.orderPercent;
      },
      gap () { // пробел
        return this.circleLength-this.dash;
      },
    },
  }
</script>

well, screw up setInterval for animation

Answer 3

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