looping loader by ptvans

index.html

<!DOCTYPE html>
<head>
</head>  
<body>

  hello
  
</body>  
</html>

_.md

[ <a href="http://tributary.io/inlet/6056229">Launch: looping loader</a> ] 6056229 by ptvans<br>[ <a href="http://tributary.io/inlet/5818931">Launch: looping loader</a> ] 5818931 by enjalot<br>

config.json

inlet.js

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

var radius = 90;
var thickness = 24;

var speed = 0.02 * (radius + 20);

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

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

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

svg.append("text")
	.text("shoveling coal")
	.attr("transform", "translate("+ 39 +", "+ 106 +")")
	.classed("message", true);

style.css

#display {
  background-color: #444;
}


.message {
  fill: #DB465C;
}

.bg {
  fill: #fff;
}

.fg {
  fill: #DB465C;
  animation-name: rotate;  
  animation-iteration-count:  infinite;
  animation-timing-function: linear;
  -ms-animation-name: rotate;  
  -ms-animation-iteration-count:  infinite;
  -ms-animation-timing-function: linear;
  -webkit-animation-name: rotate;  
  -webkit-animation-iteration-count:  infinite;
  -webkit-animation-timing-function: linear;

}

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

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

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