Процентная анимация по кругу

Question

У меня есть код, который отображает процент в виде круга. Можно ли что-то сделать, чтобы анимация начиналась сверху, справа, а не так, как сейчас, она начинается справа. Можно ли округлить эту линию? Есть ли другой, лучший код, чтобы сделать что-то подобное? Меня интересует только ваниль JS.

var circle = document.querySelector('circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
circle.style.strokeDasharray = circumference;
circle.style.strokeDashoffset = circumference;

function setProgress(percent) {
   var offset = circumference - percent / 100 * circumference;
   circle.style.strokeDashoffset = offset;
}
setProgress(60);

<svg class="progress-ring" width="120" height="120">
   <circle class="progress-ring__circle" stroke="#000" stroke-width="8" fill="transparent" r="56" cx="60" cy="60">
</svg>

Answer 1

Как я уже говорил, вы можете вращать элемент преобразования svg: rotate (-90deg). В качестве альтернативы вы можете вращать круг. Также вы можете использовать путь вместо круга и сделать его начало сверху. Если вы хотите использовать путь, это то, как вы это делаете:

В этом случае путь начинается сверху M60,4 Далее следует ар c, где оба радиуса равны 56. Первый ар c заканчивается в 60,116. За секундой следует c A56,56,0 0 1 60,4 и, наконец, вы закрываете путь z

Для circumference вам не нужно знать радиус. Вы можете сделать var circumference = circle.getTotalLength();, где getTotalLength - это метод, который возвращает общую длину пути.

var circle = document.querySelector('path');
var circumference = circle.getTotalLength();
circle.style.strokeDasharray = circumference;
circle.style.strokeDashoffset = circumference;

function setProgress(percent) {
   var offset = circumference - percent / 100 * circumference;
   circle.style.strokeDashoffset = offset;
}
setProgress(60);

<svg class="progress-ring" width="120" height="120">
     <path fill="none" class="progress-ring__circle" stroke="black" stroke-linecap="round" stroke-width="8" d="M60,4A56,56,0 0 1 60,116A56,56,0 0 1 60,4z" /> 
</svg>

Answer 2

Прежде всего, добро пожаловать на StackOverflow .

Я думаю, у вас есть проблема тригонометрии здесь. У вас есть тригонометрический круг c с вашим кодом, и он начинается, как и другие тригонометрические круги c справа:

Простое решение - повернуть ваш круг с помощью CSS:

svg{
   transform: rotate(-90deg);
}