<div class="ajax-loader">
  <div class="ajax-loader-logo">
    <!-- circle -->
    <div class="ajax-loader-circle">
      <svg class="ajax-loader-circle-spinner"
           viewBox="0 0 500 500"
           xml:space="preserve">
        <circle
                cx="250" cy="250" r="239" />
      </svg>
    </div>

    <!-- Letters -->
    <div class="ajax-loader-letters">
      <svg
           viewBox="0 0 500 500"
           xml:space="preserve">
        <path
              class="ajax-loader-m"	
              d="m 352.03895,264.80278 c -16.93432,41.68204 -33.8677,83.36408 -50.77967,124.99117 -1.97244,0 -3.73721,0 -5.61559,0 -16.61955,-41.9875 -33.20185,-83.88652 -49.786,-125.78648 -0.15739,0.0317 -0.31384,0.0643 -0.47123,0.0968 -6.34292,40.41364 -12.68584,80.82915 -19.04086,121.32009 -6.67446,0 -13.1254,0 -19.9321,0 10.66218,-55.19765 21.29641,-110.25374 31.95766,-165.443 2.25182,0 4.45057,0 6.79924,0 18.25394,44.43582 36.51812,88.89772 54.7823,133.35775 0.15366,0.0196 0.30732,0.0373 0.46098,0.0568 17.91402,-44.48704 35.8299,-88.97408 53.75231,-133.48162 2.2481,0 4.39003,0 6.7592,0 10.07267,55.14084 20.1379,110.23605 30.23293,165.50168 -7.07676,0 -13.90488,0 -21.06918,0 -3.0192,-20.01591 -5.8242,-40.10633 -8.76889,-60.17532 -2.94935,-20.10345 -5.8093,-40.21994 -8.70929,-60.3299 -0.18998,-0.0373 -0.3809,-0.0726 -0.57181,-0.10803 z" />
        <path
              class="ajax-loader-e"	
              d="m 198.8385,177.4547 c 0,5.86052 0,11.35318 0,17.08332 -23.31448,0 -46.52746,0 -69.6706,0 -0.53176,1.8132 -0.64072,61.29657 -0.14248,64.00007 23.16176,0 46.36915,0 69.74417,0 0,6.06633 0,11.89332 0,17.8451 -29.98894,0 -59.89221,0 -89.92771,0 0,-55.30195 0,-110.47631 0,-165.64695 1.62228,-0.51407 84.24786,-0.75247 89.7042,-0.26169 0.49358,1.52357 0.63606,14.37704 0.14621,17.80227 -11.61394,0 -23.2791,0 -34.94239,0 -11.59718,0 -23.19343,0 -34.90329,0 0,16.46496 0,32.60583 0,49.07451 3.31069,0.20953 66.45025,0.10337 69.99189,0.10337 z" />
      </svg>
    </div>
  </div>
</div>

@import "compass/css3";

$loader_duration: 1.4s;
$loader_offset: 1570; // (2 x pie x r = 250 (from svg))
.ajax-loader{
	@include transition(750ms ease-out);
	@extend %absoluteFullSize;
	z-index: 50;

	.ajax-loader-logo{
		position: absolute;
		left: 50%;
		top: 50%;
		@include translate(-50%, -50%);
		width: 100px;
		height: 100px;
	}

	// Circle
	.ajax-loader-circle{
		@extend %absoluteFullSize;
		@include transform-origin(50%, 50%);
		@include animation(
			ajaxLoaderSpin $loader_duration linear infinite
		);

		.ajax-loader-circle-spinner{
			@extend %absoluteFullSize;
			@include transform-origin(50%, 50%);
			@include animation(
				ajaxLoaderDashSpin $loader_duration ease-in-out infinite
			);
		}

		circle{
			@extend %absoluteFullSize;
			@include animation(
				ajaxLoaderColors ($loader_duration*4) ease-in-out infinite,
				ajaxLoaderDash $loader_duration ease-in-out infinite
			);

			stroke-dasharray: $loader_offset;
         stroke-dashoffset: $loader_offset*.25;
			stroke: #fff;
		   	stroke-width: 19; 
		   	fill: none;
		}
	}

	// Letters
	.ajax-loader-letters{
		@extend %absoluteFullSize;

		path{
			fill: #fff;
		}
	}
}

// Spinner
@include keyframes(ajaxLoaderSpin){
	0% { 
		@include rotate(0deg); 
	}
	100% { 
		@include rotate(270deg); 
	}
};
@include keyframes(ajaxLoaderColors){
	0% { stroke: #35ad0e; }
	25% { stroke: #d8ad44; }
	50% { stroke: #d00324; }
	75% { stroke: #dc00b8; }
	100% { stroke: #017efc; }
}
@include keyframes(ajaxLoaderDash){
	0% { 
		stroke-dashoffset: $loader_offset*.9; 
	}
	50% {
		stroke-dashoffset: $loader_offset*.25;
	}
	100% {
		stroke-dashoffset: $loader_offset*.9;
	}
};
@include keyframes(ajaxLoaderDashSpin){
	0% { 
	}
	50% {
		@include rotate(135deg);
	}
	100% {
		@include rotate(450deg);
	}
};

@mixin absoluteFullSize{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}
%absoluteFullSize{ @include absoluteFullSize; }

body{
	background: #141414;
}