A pure svg spinner generated with d3. Play with this here: http://enjalot.com/inlet/4513075/

svg-spinner.js

// tweak these options
var lineTotal = 16,
  lineLength = 30,
  speed = 1.28,
  width = 1.96,
  radius = 16,
  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/200 * (i + 1) + 's';
    }
  });