Как реализовать Анимацию выделения сектора окружности (заполнение круга цветом от 0 до определённого значения)?

Question

[Illia T]

Образно, процесс можно проиллюстрировать на примере стрелочных часов: одна стрелка неподвижна, другая двигается до определённого значения и пространство между ними заполняется цветом (стрелок при этом нет, это просто образная визуализация границ).

Answer 1

[profesor08]

Можешь попытаться сделать на svg, можешь нарисовать на canvas. jQuery тебе тут не помошник. Свойства круга и окружности в помощь.
https://codepen.io/Profesor08/pen/QQQeJp

Answer 2

[Сергей Левченко]

делаете svg в нем 2 circle
1 circle - незаполненный круг
2 circle - имитируем заполнение, джаваскриптом управляем атрибутами stroke-dasharray, stroke-dashoffset(при необходимости), transform для поворота

у stroke-dasharray есть dash(черта - это и будет заполнением) и gap(пробел) их вам надо расчитывать
пример моего кода из проекта на vuejs

<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>

ну и докрутить setInterval для анимации

Answer 3

[Сергей Соколов]

Можно делать на svg. Заливка это по сути окружность половинного радиуса супер-жирной линией, толщиной в пол-радиуса. Пример заполнения не такой толстой линией.