Jordan Dobson's Loading Indicator

_loading-indicator.scss

// Jordan Dobson's Loading Indicator
// Development, design, HTML and CSS by Jordan Dobson
// http://jordandobson.tumblr.com/post/905003090/resizable-animated-loading-indicator

// Loader width/height
$spin-size: 40px !default;

// Pick a color and set the alpha value to 1
$spin-color: #fff !default;

// Loader duration
$spin-duration: 0.5s !default;

// Loading Container
.loading {
	font-size: $spin-size;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 1em;
	width: 1em;
	margin-top: -0.5em;
	margin-left: -0.5em;
	@include transform-origin(0.5em, 0.5em);

	> span {
		// Shared Properties for all the lines
		&,
		&:before,
		&:after {
			display: block;
			position: absolute;
			width: 0.1em;
			height: 0.25em;
			top: 0;
			@include transform-origin(0.05em, 0.5em);
			@include border-radius(0.2em);
		}

		& {
			left: 50%;
			margin-left: -0.05em;
		}

		&:before,
		&:after {
			content: " ";
		}

		// Rotate each of the 4 Spans
		&.top {
			@include rotate(0deg);
		}
		&.right {
			@include rotate(90deg);
		}
		&.bottom {
			@include rotate(180deg);
		}
		&.left {
			@include rotate(270deg);
		}

		// These are the two lines that surround each of the 4 Span lines
		&:before {
			@include rotate(30deg);
		}
		&:after {
			@include rotate(-30deg);
		}

		// Set Colors
		&.top {
			background: transparentize($spin-color, 0.01);
		}
		&.top:after {
			background: transparentize($spin-color, 0.1);
		}
		&.left:before {
			background: transparentize($spin-color, 0.2);
		}
		&.left {
			background: transparentize($spin-color, 0.3);
		}
		&.left:after {
			background: transparentize($spin-color, 0.4);
		}
		&.bottom:before {
			background: transparentize($spin-color, 0.5);
		}
		&.bottom {
			background: transparentize($spin-color, 0.6);
		}
		&.bottom:after {
			background: transparentize($spin-color, 0.65);
		}
		&.right:before {
			background: transparentize($spin-color, 0.7);
		}
		&.right {
			background: transparentize($spin-color, 0.75);
		}
		&.right:after {
			background: transparentize($spin-color, 0.8);
		}
		&.top:before {
			background: transparentize($spin-color, 0.85);
		}
	}
}

// Set Animation
.loading {
	@include animation(rotating-loader $spin-duration linear infinite);
}

@include keyframes(rotating-loader) {
	0% {
		@include transform(rotate(0deg));
	}
	8.32% {
		@include transform(rotate(0deg));
	}

	8.33% {
		@include transform(rotate(30deg));
	}
	16.65% {
		@include transform(rotate(30deg));
	}

	16.66% {
		@include transform(rotate(60deg));
	}
	24.99% {
		@include transform(rotate(60deg));
	}

	25% {
		@include transform(rotate(90deg));
	}
	33.32% {
		@include transform(rotate(90deg));
	}

	33.33% {
		@include transform(rotate(120deg));
	}
	41.65% {
		@include transform(rotate(120deg));
	}

	41.66% {
		@include transform(rotate(150deg));
	}
	49.99% {
		@include transform(rotate(150deg));
	}

	50% {
		@include transform(rotate(180deg));
	}
	58.32% {
		@include transform(rotate(180deg));
	}

	58.33% {
		@include transform(rotate(210deg));
	}
	66.65% {
		@include transform(rotate(210deg));
	}

	66.66% {
		@include transform(rotate(240deg));
	}
	74.99% {
		@include transform(rotate(240deg));
	}

	75% {
		@include transform(rotate(270deg));
	}
	83.32% {
		@include transform(rotate(270deg));
	}

	83.33% {
		@include transform(rotate(300deg));
	}
	91.65% {
		@include transform(rotate(300deg));
	}

	91.66% {
		@include transform(rotate(330deg));
	}
	100% {
		@include transform(rotate(330deg));
	}
}

loading.html

<span class="loading">
	<span class="top"></span>
	<span class="bottom"></span>
	<span class="left"></span>
	<span class="right"></span>
</span>