tvandervossen/spinner.html

## spinner.html
<!DOCTYPE html>
<html>
<head>
<title>Spinner</title>
<meta charset="utf-8">
<style>
canvas, a { display: block; }
</style>
</head>
<body>

<canvas id="small" width="10" height="10"></canvas>
<canvas id="regular" width="10" height="10"></canvas>
<canvas id="iphone" style="background: #000" width="10" height="10"></canvas>
<canvas id="huge" width="10" height="10"></canvas>

<script>

function spinner(canvas, options) {
  if (!options) {
    options = {};
  }
  if (!options.scale) {
    options.scale = 1;
  }

  var width = (options.width || 3) * options.scale;
  var inner = (options.inner || 8.70) * options.scale;
  var outer = (options.outer || 14.42) * options.scale;
  var color = options.color || '#191919';
  var count = options.sectors || 12;
  var delay = 1000 / (options.speed || 2) / count;
  var final = options.final === undefined ? 0.18 : options.final;
  var curve = options.curve || 1.8;

  var center = Math.ceil(outer + width);

  canvas.height = center * 2;
  canvas.width = canvas.height * count;
  var context = canvas.getContext('2d');
  context.lineWidth = width;
  context.lineCap = 'round';
  context.strokeStyle = color;

  var sectors = [];
  var opacities = [];
  for (var i = 0; i < count; i++) {
    var a = 2 * Math.PI / count * i - Math.PI / 2;
    var cos = Math.cos(a);
    var sin = Math.sin(a);
    sectors[i] = [inner * cos, inner * sin, outer * cos, outer * sin];
    opacities[i] = Math.pow(i / (count - 1), curve) * (1 - final) + final;
  }

  for (var i = 0; i < count; i++) {
    opacities.unshift(opacities.pop());
    for (var j = 0; j < count; j++) {
      console.log(opacities[j]);
      context.globalAlpha = opacities[j];
      context.beginPath();
      context.moveTo(center + center * i * 2 + sectors[j][0], center + sectors[j][1]);
      context.lineTo(center + center * i * 2 + sectors[j][2], center + sectors[j][3]);
      context.stroke();
    }
  }

  var link = document.createElement('a');
  link.innerHTML = canvas.id;
  link.href = canvas.toDataURL();
  document.body.appendChild(link);
}

spinner(document.getElementById('regular'));
spinner(document.getElementById('small'), {width: 1.35, inner: 4, outer: 7.18, color: '#090909'});
spinner(document.getElementById('iphone'), {width: 6, inner: 20, outer: 34, color: '#ffffff', final: 0.3});
spinner(document.getElementById('huge'), {scale: 5, sectors: 6, speed: 1, color: 'deeppink'});

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Spinner</title>
	<meta charset="utf-8">
	<style>
	canvas, a { display: block; }
	</style>
	</head>
	<body>

	<canvas id="small" width="10" height="10"></canvas>
	<canvas id="regular" width="10" height="10"></canvas>
	<canvas id="iphone" style="background: #000" width="10" height="10"></canvas>
	<canvas id="huge" width="10" height="10"></canvas>

	<script>

	function spinner(canvas, options) {
	if (!options) {
	options = {};
	}
	if (!options.scale) {
	options.scale = 1;
	}

	var width = (options.width \|\| 3) * options.scale;
	var inner = (options.inner \|\| 8.70) * options.scale;
	var outer = (options.outer \|\| 14.42) * options.scale;
	var color = options.color \|\| '#191919';
	var count = options.sectors \|\| 12;
	var delay = 1000 / (options.speed \|\| 2) / count;
	var final = options.final === undefined ? 0.18 : options.final;
	var curve = options.curve \|\| 1.8;

	var center = Math.ceil(outer + width);

	canvas.height = center * 2;
	canvas.width = canvas.height * count;
	var context = canvas.getContext('2d');
	context.lineWidth = width;
	context.lineCap = 'round';
	context.strokeStyle = color;

	var sectors = [];
	var opacities = [];
	for (var i = 0; i < count; i++) {
	var a = 2 * Math.PI / count * i - Math.PI / 2;
	var cos = Math.cos(a);
	var sin = Math.sin(a);
	sectors[i] = [inner * cos, inner * sin, outer * cos, outer * sin];
	opacities[i] = Math.pow(i / (count - 1), curve) * (1 - final) + final;
	}

	for (var i = 0; i < count; i++) {
	opacities.unshift(opacities.pop());
	for (var j = 0; j < count; j++) {
	console.log(opacities[j]);
	context.globalAlpha = opacities[j];
	context.beginPath();
	context.moveTo(center + center * i * 2 + sectors[j][0], center + sectors[j][1]);
	context.lineTo(center + center * i * 2 + sectors[j][2], center + sectors[j][3]);
	context.stroke();
	}
	}

	var link = document.createElement('a');
	link.innerHTML = canvas.id;
	link.href = canvas.toDataURL();
	document.body.appendChild(link);
	}

	spinner(document.getElementById('regular'));
	spinner(document.getElementById('small'), {width: 1.35, inner: 4, outer: 7.18, color: '#090909'});
	spinner(document.getElementById('iphone'), {width: 6, inner: 20, outer: 34, color: '#ffffff', final: 0.3});
	spinner(document.getElementById('huge'), {scale: 5, sectors: 6, speed: 1, color: 'deeppink'});

	</script>

	</body>
	</html>