pure svg spinner generator

_.md

[ Launch Inlet ]
Gist #4513073
Gist #3200444

config.json

{"description":"pure svg spinner generator","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"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,"tab":"edit","display_percent":0.5635097493036215,"hidepanel":false}

inlet.js

// tweak these options
var lineTotal = 12,
  lineLength = 5,
  speed = 1.28,
  width = 1.4,
  radius = 2.9,
  color = '#333',

    
  // dont touch these
  posX = 100,
  posY = 100,
  svg = d3.select('svg'),
  rotIncrement = Math.floor(360/lineTotal),
  group,
  lines;
 
function data() {
  return new Array(lineTotal);
}
 
// <g> only needed for nice display in tributary
group = svg.append('g')
	.attr('transform', 'translate(' + [posX, posY] + ')');

 
lines = group.selectAll('line')
.data(data)
.enter()
.append('line')
  .attr({
    'fill': 'none',
    'stroke-linecap': 'round',
    'stroke-width': width,
    'x1': radius,
    'y1': radius,
    'x2': lineLength,
    'y2': lineLength,
    'stroke': color,
    'transform': function (d,i) {
      return 'rotate(' + (i + 1) * rotIncrement + ')';
    }
  })
.append('animate')
  .attr({    
    'attributeName': 'opacity',
    'repeatCount': 'indefinite',
    'attributeType': 'CSS',
    'from': 1,
    'to': 0.3,
    'dur': speed + 's',
    'begin': function (d,i) {
      return 16/150 * (i + 1) + 's';
    }
  });