I have a code that displays the percentage as a circle. Is it possible to do something to make the animation start from the top, to the right, and not like now, it starts from the right. Is it possible to round this line? Is there any other, better code to do something like that? I'm only interested in vanillaJS.

```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);
```

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