Slack loading bubbles

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100%; background: RGBA(87, 57, 90, 1) }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see!
    var svg = d3.select("body").append("svg")
    // curcle numbers
    var circles = d3.range(5);
    var smallRadius = 40;
    var largeRadius = 80;    
    var marginLeft = window.innerWidth/2 - (circles.length - 2) * smallRadius - largeRadius;
    var cycleCount = 0;
    var incrementCount = true;
    var ratio = largeRadius/smallRadius;
    
    svg.selectAll('circle').data(circles)
      .enter().append("circle")
        .attr({
          cx: function(d, i){ 
            if (d < cycleCount) return smallRadius * 2 * d + marginLeft;
            if (d === cycleCount) return largeRadius/2 + smallRadius * 2 * d + marginLeft;
            if (d > cycleCount) return largeRadius + smallRadius * 2 * d + marginLeft;
          }, 
          cy: window.innerHeight/2, 
      		fill: 'RGBA(34, 179, 123, 1)',
          r: function(d, i){ 
            if (i === cycleCount) return largeRadius; 
            return smallRadius;
          }
        })
        .each(cycle);

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js