<div id="preloader-container">

<svg id="nine" width="124" height="118" viewBox="0 0 124 118" overflow="visible">
  <circle class="balls" cx="16" cy="16" r="16"/>
  <circle class="balls" cx="62" cy="16" r="16"/>
  <circle class="balls" cx="108" cy="16" r="16"/>
  <circle class="balls" cx="16" cy="59" r="16"/>
  <circle class="balls" cx="62" cy="59" r="16"/>
  <circle class="balls" cx="108" cy="59" r="16"/>
  <circle class="balls" cx="16" cy="102" r="16"/>
  <circle class="balls" cx="62" cy="102" r="16"/>
  <circle class="balls" cx="108" cy="102" r="16"/>
</svg>

</div>

body {
  margin: 0;
  overflow: hidden;
  background-color: white;
}

div#preloader-container {
  display: block;
  position: relative;
  margin: 0;
  height: 100vh;
  width: 100vw;
  
}
#nine{
  width:124px;
  height:118px;
  position:relative;
  left: 50%;
  top:50%;
  margin-left:-62px;
  margin-top:-59px;
  display: block;
}
.balls{
  fill:#362476;
  display:block;
}

var _myloop = 2;
var _myColors = ["#362476",//NEC"#362476"
"#3d2968",//Honey
"#fe552e",//Coach
"#d0016d",//theFix
"#d13038",//Pickle
"#03939c",//Homes
"#1eabe1",//Elsewhere
"#fab319",//Kitchen
"#95d60a",//LifeStyle
"#d41f28"//WWOS
];

function myAnim()
{
  CSSPlugin.defaultTransformPerspective = 600;
  CSSPlugin.useSVGTransformAttr = false;
  
    TweenMax.set('.balls',{fill:_myColors[0],rotationX:0, rotationY:0,transformOrigin:"50% 50%"});
    TweenMax.staggerTo('.balls', 2,{rotationX:180,rotationY:180, transformOrigin:"50% 50%", ease:Expo.easeOut, delay:.2},0.1);
    TweenMax.staggerTo('.balls', 1,{fill:_myColors[_myloop], ease:Expo.easeOut,delay:.2},0.1);
    TweenMax.staggerTo('.balls', 2,{fill:_myColors[0], ease:Sine.easeOut,delay:1},0.1);
  
    TweenMax.delayedCall(4, completeHandler);
}
  
function completeHandler()
{
  _myloop = (_myloop+1)%9;
  myAnim();
}

TweenMax.delayedCall(1, myAnim);