progress.less

// Our keyframes, for the spinner
@-webkit-keyframes iron-router-progress-before {
	0%   { -webkit-transform : rotate(0deg);   transform : rotate(0deg); }
	100% { -webkit-transform : rotate(360deg); transform : rotate(360deg); }
}
@-moz-keyframes iron-router-progress-before {
	0%   { -moz-transform    : rotate(0deg);   transform : rotate(0deg); }
	100% { -moz-transform    : rotate(360deg); transform : rotate(360deg); }
}
@-o-keyframes iron-router-progress-before {
	0%   { -o-transform      : rotate(0deg);   transform : rotate(0deg); }
	100% { -o-transform      : rotate(360deg); transform : rotate(360deg); }
}
@-ms-keyframes iron-router-progress-before {
	0%   { -ms-transform     : rotate(0deg);   transform : rotate(0deg); }
	100% { -ms-transform     : rotate(360deg); transform : rotate(360deg); }
}
@keyframes iron-router-progress-before {
	0%   {                                     transform : rotate(0deg); }
	100% {                                     transform : rotate(360deg); }
}

// Our only real DOM-node, to keep things simple
#iron-router-progress {
	display          : block;
	position         : fixed;
	top              : 0;
	left             : 0;
	width            : 0%;
	height           : 3px;
	background-color : rgb(170, 242, 0);
	box-shadow       : 0 0 5px rgba(170, 242, 0, .5);
	opacity          : 1;
	z-index          : 10000;

	// CSS-only spinner
	// The spinner only shows, after 0.5 seconds of load time
	&.spinner:before {
		content            : "";
		display            : block;
		position           : fixed;
		top                : 10px;
		right              : 10px;
		width              : 25px;
		height             : 25px;
		background-color   : transparent;
		border             : 3px solid rgb(170, 242, 0);
		border-radius      : 100px;
		border-right-color : transparent !important;
		opacity            : 0;
		z-index            : 10000;
		pointer-events     : none;
		transition         : .5s opacity;
		transition-delay   : .5s;
	}

	// The transitions are defined here, as we don't want it to fade in (opacity), when the progress starts
	&.loading {
		transition       : 1s width, 1s opacity;
		transition-delay : 0s, 1s;
		&.spinner:before {
			opacity : 1;
			-webkit-animation  : iron-router-progress-before .5s linear infinite;
			-moz-animation     : iron-router-progress-before .5s linear infinite;
			-o-animation       : iron-router-progress-before .5s linear infinite;
			-ms-animation      : iron-router-progress-before .5s linear infinite;
			animation          : iron-router-progress-before .5s linear infinite;
		}
	}

	// When we're done, set the opacity of our element, and it's spinner to zero
	&.done {
		opacity : 0;
		&.spinner:before {
			opacity : 0;
		}
	}
}