<div id="title">3D Rotating Preloader Spinner<br>Powered by Greensock Animation Platform
</div>

<div id="container">
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
</div>

body{
  margin:0;
  background:#333;
}
#title{
  font-size:28px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color:#FFF;
  text-align:center;
}
.div1{
  width:20px;
  height:20px;
  background:#fff;
  position:absolute;
  border-radius:50%;
}
#container{
  position:relative;
  top:100px;
  left:50%;
  margin-left:-150px;
  width:300px;
}

var loaderItems = $(".div1"),
    loaderAmount = loaderItems.length,
    container = $("#container"),
    angle = 360 / loaderAmount,
    tl = new TimelineMax({
      paused: true,
      repeat: -1,
      delay: 1.15
    }),

    //Spin velocity, smaller the value, faster it rotates
    spinSpeed = 0.05;

TweenMax.set(container, {
  perspective: 300
});

$.each(loaderItems, function(i) {
  var alpha = (0.1 * i) + .3;

  TweenMax.set($(this), {
    left: 150,
    top: 100
  });

  TweenMax.to($(this), 1, {
    rotationY: ((i + 1) * angle),
    transformOrigin: '50% 50% -100px',
    autoAlpha: alpha
  });

  tl.set(loaderItems, {
    rotationY: ('+=' + angle),
    transformOrigin: '50% 50% -100px',
    ease: Linear.easeNone,
    delay: spinSpeed
  })
});

tl.play();