Spinny Loading Icon by curran

index.html

<!DOCTYPE html>
<html>
  <head>
  <script src="//d3js.org/d3.v3.min.js"></script>
    <meta charset="utf-8">
    <title>Spinny</title>
  </head>
  <body>
    <script>
      var outerWidth = 960;
      var outerHeight = 500;
      var centerX = outerWidth / 2;
      var centerY = outerHeight / 2;
      
      var minRadius = 1;
      var maxRadius = 3;
      var numDots = 10;
      var ringRadius = 13;
      var rotation = 0;
      var rotationIncrement = 3;
      
      var angle = d3.scale.linear()
        .domain([0, numDots])
        .range([0, Math.PI * 2]);
      
      var radius = d3.scale.linear()
        .domain([0, numDots - 1])
        .range([maxRadius, minRadius]);
      
      var g = d3.select("body")
        .append("svg")
          .attr("width", outerWidth)
          .attr("height", outerHeight)
        .append("g")
          .attr("transform", "translate(" + centerX + "," + centerY + ")")
        .append("g");
      
      var circles = g.selectAll("circle")
        .data(d3.range(numDots))
        .enter().append("circle")
        .attr("cx", function (d){
          return Math.sin(angle(d)) * ringRadius;
        })
        .attr("cy", function (d){
          return Math.cos(angle(d)) * ringRadius;
        })
        .attr("r", radius);
      
      d3.timer(function (){
        g.attr("transform", "rotate(" + rotation + ")");
        rotation += rotationIncrement;
      });
      
    </script>
  </body>
</html>