Loading Indicator for Donut Chart

Loading indicator for a donut chart

<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<style>

body {
  font: 10px sans-serif;
}

div {
  padding-left: 100px;
  padding-top: 10px;
  width: 30%;
  margin: 0 auto;
  font: 14px;
}

input {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  text-align: center;
  font: 14px;
  width: 60px;
}
</style>

<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
    height = 500;

// draw and append the container
var svg = d3.select("body").append("svg")
  .attr("width", width).attr("height", height);

// set the thickness of the inner and outer radii
var min = Math.min(width, height);
var oRadius = min / 2 * 0.9;
var iRadius = min / 2 * 0.6;
var cornerRadius = 1;

// construct default pie laoyut
var pie = d3.layout.pie().value(function(d){ return d; });

// construct arc generator
var arc = d3.svg.arc()
  .outerRadius(oRadius)
  .innerRadius(iRadius)
  .cornerRadius(cornerRadius);

// creates the pie chart container
var g = svg.append('g')
  .attr('transform', function(){
    if ( window.innerWidth >= 960 ) var shiftWidth = width / 2;
    if ( window.innerWidth < 960 ) var shiftWidth = width / 3;
    return 'translate(' + shiftWidth + ',' + height / 2 + ')';
  })

// enter data and draw pie chart
var path = g.datum([1]).selectAll("path")
  .data(pie)
  .enter().append("path")
    .attr("class","piechart")
    .attr("fill", '#e2e2e2')
    .attr("d", arc)

g.append("circle")
    .style("fill", "#00a1dc")
    .style("stroke", "white")
    .style("stroke-width", 8)
    .attr("class", 'loading-dot')  
  	.attr("r", (oRadius - iRadius)/2)
    .attr("cx", 0)  
    .attr("cy", -(iRadius + (oRadius - iRadius)/2));

rotation();
  
function rotation() {
  var circle = d3.select('.loading-dot');
  (function repeat() {
    var r = (iRadius + (oRadius - iRadius)/2);
		var positions = d3.range(-0.5*Math.PI, 1.5*Math.PI, Math.PI/30).map(function(a){
      var cx = r * Math.cos(a);
      var cy = r * Math.sin(a);
      return {cx: cx, cy: cy};
    });
   
    var counter = 0;
    interval = setInterval(function(){
	    var position = positions[counter];
      circle
  	      .attr("cx", position.cx)
    	    .attr("cy", position.cy)      
      counter++; 
      if (counter === positions.length){
        clearInterval(interval);
        rotation();
      }
    }, 15)  
  })();
}
</script>
</body>

https://d3js.org/d3.v3.min.js