looping loader

_.md

[ Launch: looping loader ] 5818931 by enjalot

config.json

{"description":"looping loader","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/eweERxu.png"}

inlet.js

var svg = d3.select("svg");

var radius = 10;
var thickness = 4;

var speed = 0.05 * (radius + 20);

var arc = d3.svg.arc()
  .startAngle(0)
  .innerRadius(radius - thickness)
  .outerRadius(radius)

svg.append("path")
  .attr("transform", "translate(60, 60)")
  .attr("d", arc.endAngle(2*Math.PI))
  .classed("bg", true)

svg.append("g")
  .attr("transform", "translate(60, 60)")
  .append("path")
  .attr("d", arc.endAngle(0.67*Math.PI))
  .style("-webkit-animation-duration", speed + "s")
  .classed("fg", true)

style.css

#display {
  background-color: white
}
.bg {
  fill: #dcdcdc
}
.fg {
  fill: #7D8F95;
  -webkit-animation-name:             rotate;  
  -webkit-animation-iteration-count:  infinite;
  -webkit-animation-timing-function: linear;

}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}