1

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.

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>
Alexandr_TT
  • 13,635
  • 3
  • 27
  • 54
test
  • 47
  • 5
  • 1
    To start at the top: you may rotate the svg element `transform:rotate(-90deg)`. Alternatively you may rotate the circle. Also you can use a path instead of a circle and make it start at the top. For the roundness you may use `stroke-linecap: round"` – enxaneta Apr 25 '20 at 14:30
  • How to use path instead? – test Apr 25 '20 at 14:31
  • You can use this path instead of the circle: ` ` – enxaneta Apr 25 '20 at 14:45
  • Nice! You maybe know what can i get r of this? Before it was: var radius = circle.r.baseVal.value – test Apr 25 '20 at 14:51
  • Because now the JS code doesn't work - the percentage calculation. – test Apr 25 '20 at 14:54
  • If you take a look at the d attribute you have 2 arcs with both radiuses 56: `A56,56...` If you don't want to hardcode the radius you may use the d as a string and search for the first value after A – enxaneta Apr 25 '20 at 14:55
  • Also you can use `var circumference = circle.getTotalLength();` and you don't need the radius – enxaneta Apr 25 '20 at 14:58

2 Answers2

1

As I've commented you may rotate the svg element transform:rotate(-90deg). Alternatively you may rotate the circle. Also you can use a path instead of a circle and make it start at the top. If you want to use a path this is how you do it:

In this case the path starts at the top M60,4 Next comes an arc where both radiuses are 56. The first arc ends at 60,116 Follows a second arc A56,56,0 0 1 60,4 and finnaly you close the path z

For the circumference you don't need to know the radius. You can do var circumference = circle.getTotalLength(); where getTotalLength is a method that is returning the total length of a path.

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>
enxaneta
  • 31,608
  • 5
  • 29
  • 42
  • Thank you. You've helped me a lot. I still have questions. It's possible to make the same wheel frame just that little bit visible, as if to see that there is an unfilled wheel. And it's possible to make a gradient instead of black? – test Apr 25 '20 at 15:12
  • Please take a look at this: https://stackoverflow.com/questions/61363990/circular-progress-indicator-with-a-color-gradient-with-svgs/61403931#61403931 – enxaneta Apr 25 '20 at 15:15
  • Okay, that's very interesting, but I don't want a gradient haha. And is this wheel little visible, to mark as if there's so much left, how easy can it be to do? Can I make the same wheel with a smaller z-index and absolute position? – test Apr 25 '20 at 15:22
  • Ask this as a different question – enxaneta Apr 25 '20 at 15:24
0

First of all, Welcome on StackOverflow.

I think you have a trigonometry problem here. You have a trigonometric circle with your code and it start like others trigonometric circles at the right :

Trigonometric circle

A simple solution is to rotate your circle with CSS :

svg{
   transform: rotate(-90deg);
}
Thomas Lamothe
  • 174
  • 1
  • 9