<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 100 100">
  <circle fill="#FEFEFE" cx="50" cy="50" r="6" id="middle"/>
  <circle fill="#1FA756" cx="62.5" cy="43.5" r="4.5"/>
  <circle fill="#1FA756" cx="37.5" cy="43.5" r="4.5"/>
  <circle fill="#1FA756" cx="50" cy="37" r="4.5"/>
  <circle fill="#1FA756" cx="62.5" cy="56.5" r="4.5"/>
  <circle fill="#1FA756" cx="37" cy="56.5" r="4.5"/>
  <circle fill="#1FA756" cx="50" cy="63.5" r="4.5"/>
</svg>

// Demo Styling
html,body {height: 100%;}body{display: flex;flex-direction:column;align-items: center;justify-content:center;width:100%;background:#2A3744;}svg{max-width:100%;}

// Required Styling
$loader-proportion: 144px;

svg {
  width: $loader-proportion;
  height: $loader-proportion;
}

// Required Styling
svg > circle:nth-of-type {
  position: absolute;
  transform: scale(0);
}

var tmax_options = {
  delay: 0,
  repeat: -1,
  repeatDelay: 0,
  yoyo: true
};

var tmax_tl     = new TimelineMax(tmax_options),
    svg_length  = $('svg > circle').length,
    svg_shapes  = [],
    tween_options_to = {
      css: {
        scale: 0,
        transformOrigin: 'center center'
      },
      ease: Cubic.easeInOut,
      force3D: true
    };

for(var i = 1, l = svg_length; i <= l; i++) {
  svg_shapes.push($('svg > circle:nth-of-type('+ i +')'));
}

tmax_tl.staggerTo(svg_shapes, 1, tween_options_to, 0.1275);
tmax_tl.timeScale(2.5);