SVG Loading indicator 3

_.md

[ Launch: Loading indicator 2 ] 9944173 by roundrobin
[ Launch: Loading indicator ] 9944169 by roundrobin
[ Launch: loading indicator 2 ] 9944145 by roundrobin

config.json

{"description":"SVG Loading indicator 3","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"test.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/05K6zlC.png"}

inlet.js

var spinner = function(r,x,y){
  var padding = 10;
  var mainGroup = g.append("g")
  .attr({
    "class": "spinner",
    "transform" : "translate("+x+","+y+")"
   
  }); 
  
  var g1 = mainGroup.append("g")
  .attr({
    "class": "",
    "transform" : "translate("+(r)+",100)"
   
  });
   
  var g2 = mainGroup.append("g")
  .attr({
    "transform" : "translate("+((r*3+padding))+",100)"
  });
  
  var g3 = mainGroup.append("g")
  .attr({
    "transform" : "translate("+((r*6+padding))+",100)"
  });
    
  var circ = g1.append("circle")
  .attr({
    "r" : r,
    "fill": "#3855fe",
    "class": "bounce1 bounce"
  });
   
   
  var circ = g2.append("circle")
  .attr({
    "r" : r,
    "fill": "#3855fe",
    "class": "bounce2 bounce" 
  });
  
  var circ = g3.append("circle")
  .attr({
    "r" : r,
    "fill": "#3855fe",
    "class": "bounce3 bounce"
  });
  

}
   
spinner(10,20,30);

test.css

.bounce{
  -webkit-animation-duration: 1.4s;
  -webkit-animation-name: bouncedelay;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;

  -webkit-animation-iteration-count: infinite;  
} 


.bounce1 {
  -webkit-animation-delay: -0.32s;
}     
              
.bounce2 {
  -webkit-animation-delay: -0.16s; 
} 
            
.bounce3 {
  -webkit-animation-delay: 0s;
} 

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}