loading svg circle with percentage

by Alexandru Gatea

HTML

<div class="animation-container">
    <svg height="100" width="100" class="circle">
    <g>
      <circle cx="50" cy="50" r="48" />
      <text x="50%" y="50%" text-anchor="middle" alignment-baseline="middle"></text>
    </g>
    </svg>
</div>

SCSS

.animation-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  
  .circle {
    
    circle {
      fill: transparent;
      stroke-width: 3;
      stroke: #321abc;
      stroke-dasharray: 0;
      animation: rotate 2s linear infinite;
      transform-origin: center center;
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

JavaScript

var count = 0;

var circleRadius = parseInt($('circle').attr('r'));
var circleLength = 2 * Math.PI * circleRadius;
var increment = circleLength / 100;
var toAdd = circleLength / 100;

var counting = setInterval(function() {
    if (count <= 100) {
        $('.circle text').text(count + '%');
        $('.circle circle').css('stroke-dasharray', increment + ',' + circleLength);
        increment += toAdd;
        count++;
    } else {
        clearInterval(counting)
    }
}, 100);