Arrange Loadbar in Circle

Question

People. This code is working. But I want help to set the initial position of the progress bar.

Currently it starts at 45º. But I want it to start at 0º. Someone knows how to help me with this?

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

circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;

var percent = 1;
var tempid = setInterval(circleFrame, 40);
function circleFrame() {
    if (percent >= 100) {
      clearInterval(tempid);
      } else {
      percent++;
      offset = circumference - percent / 100 * circumference;
    circle.style.strokeDashoffset = offset;
                            
          }
  }

html, body {
  background-color: #2962FF;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}

<svg class="progress-ring" width="120" height="120">
<circle class="progress-ring__circle" stroke="white" stroke-width="4" fill="transparent" r="52" cx="60" cy="60"/></svg>

Answer 1

One hypothesis would be to use css to run the element. Anything like:

circle {
  transform: rotate(-90deg);
  transform-origin: center;
}

Here’s the code with the change I suggest:

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

circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;

var percent = 1;
var tempid = setInterval(circleFrame, 40);
function circleFrame() {
    if (percent >= 100) {
      clearInterval(tempid);
      } else {
      percent++;
      offset = circumference - percent / 100 * circumference;
    circle.style.strokeDashoffset = offset;
                            
          }
  }

html, body {
  background-color: #2962FF;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}

circle {
  transform: rotate(-90deg);
  transform-origin: center;
}

<svg class="progress-ring" width="120" height="120">
<circle class="progress-ring__circle" stroke="white" stroke-width="4" fill="transparent" r="52" cx="60" cy="60"/></svg>