var speed = 0.3

var amount = 3

var bg_color = "#000"

var bg_color2 = "#000"

var size = 30

​

var color1 = "rgba(255,255,0,1)";

var color2 = "rgba(0,255,255,1);";

​

​

function loader(){

  this.loader_div = $("#loader");

​

  this.bars = [];

   var root = this;

  //INIT

  this.stage = new Kinetic.Stage({

    container: "loader",

    width: this.loader_div.width(),

    height: this.loader_div.height(),

  });

​

  this.front_cover = new Kinetic.Layer();

  this.back_cover = new Kinetic.Layer();

  this.inner = new Kinetic.Layer();

  for(var i=1;i<amount+1;i++){

    var bar = new Kinetic.Wedge({

      x: this.stage.getWidth()/2,

      y: this.stage.getHeight()/2,

      radius: 0,

      angle: 15,

      rotation: (360/amount)*i,

      fill: color1,

      shadowColor: "rgba(0,255,255,0.2)",

    });

    this.bars.push(bar);

    this.inner.add(bar);

  }

  this.back_circle = new Kinetic.Circle({

    x: this.stage.getWidth()/2,

    y: this.stage.getHeight()/2,

    radius: 0,

    fill: bg_color2,

  })

  this.front_circle = new Kinetic.Circle({

    x: this.stage.getWidth()/2,

    y: this.stage.getHeight()/2,

    radius: 0,

    fill: bg_color,

    shadowColor: "rgba(0,0,0,0.5)",

    shadowSize: 10,

  })

​

  this.front_cover.add(this.front_circle);

  this.back_cover.add(this.back_circle);

  this.stage.add(this.back_cover,this.inner,this.front_cover);

​

​

​

​

    this.play = function(){

    TweenLite.to(this.back_circle,speed/3,{

      kinetic:{

        radius: size/2,

      },

    })

    TweenLite.to(this.bars,speed/3,{

      kinetic:{

        radius: size/2,

      },

      ease: Power2.easeOut,

    })

    TweenLite.to(this.front_circle,speed/3,{

      delay: 0.1,

      kinetic:{

        radius: size/2.3,

      },

      ease: "Power2.easeOut",

      onComplete: function(){

        root.load_rotate(0,1,0);

      }

    })

  }

​

​

​

​

​

​

​

  var s = speed*1.2;

  this.load_rotate = function(count,r1,r2){

    var r1 = r1;

    var r2 = r2;

    var count = count;

    if(count>=1){

​

      r1 = r1*= -1;

      r2 = 1-r2;

      count = 0;

    }

    if(r1<0){

      e =  Power1.easeOut;

      f = color1;

    }else{

      e = Power2.easeOut;

      f = color2;

    }

    TweenMax.staggerTo(this.bars,s,{

      kinetic:{

        angle: "+="+((360/amount-40)*r1),

        rotation: "+="+((360/amount+30)*r2),

        fill: f,

      },

      ease: e,

​

    },s/3);

​

    TweenLite.to(this.loader_div,2,{

      rotationZ: "+="+180,

      ease: Power2.easeOut

    });

​

    setTimeout(function() {

​

      root.load_rotate(count+1,r1,r2);

    }, s*1600);

  }

}

​

​

$(window).load(function(){

  var l = new loader();

  l.play();

});

​