Russell Madsen ruzz311

This is a spinner/loading animation I created after seeing the effect in a gif a while back but can no longer find the source. The gif had the spokes showing which really helps explain how simple delaying of an animation can create the circular motion.

To show the spokes, reduce the transparency in the $spokeColor CSS variable (stylus).

If you look closely you can see that the math isn't quite tight enough to trick the eye into seeing this as a solid circle (of circles). It does "pull" out of shape near the end of the rotation.

A Pen by Russell on CodePen.

	OH_SHIT_I_NEED_GLOBALS = 100001;

	function iWantThis () {
	while (count < window.OH_SHIT_I_NEED_GLOBALS) {
	count = Math.random()*100000;
	}
	return "I haven't googled node yet. How does threads happen? So blocking, much crap."
	}

	iWantThis();

	"use strict";

	function formatDuration(duration) {
	var resultType = 'ms';
	var resultVal = duration;
	if (duration > 999 && duration < 60000) {
	resultType = 'sec';
	resultVal = duration / 1000;
	} else if (duration > 59999 && duration < 3600000) {
	resultType = 'min';