<svg id="svg-sprite">
	<symbol id="paw" viewBox="0 0 249 209.32">
		<ellipse cx="27.917" cy="106.333" stroke-width="0" rx="27.917" ry="35.833"/>
		<ellipse cx="84.75" cy="47.749" stroke-width="0" rx="34.75" ry="47.751"/>
		<ellipse cx="162" cy="47.749" stroke-width="0" rx="34.75" ry="47.751"/>
		<ellipse cx="221.083" cy="106.333" stroke-width="0" rx="27.917" ry="35.833"/>
		<path stroke-width="0" d="M43.98 165.39s9.76-63.072 76.838-64.574c0 0 71.082-6.758 83.096 70.33 0 0 2.586 19.855-12.54 31.855 0 0-15.75 17.75-43.75-6.25 0 0-7.124-8.374-24.624-7.874 0 0-12.75-.125-21.5 6.625 0 0-16.375 18.376-37.75 12.75 0 0-28.29-7.72-19.77-42.86z"/>
	</symbol>
</svg>

<div class="ajax-loader">
	<div class="paw"><svg class="icon"><use xlink:href="#paw" /></svg></div>
	<div class="paw"><svg class="icon"><use xlink:href="#paw" /></svg></div>
	<div class="paw"><svg class="icon"><use xlink:href="#paw" /></svg></div>
	<div class="paw"><svg class="icon"><use xlink:href="#paw" /></svg></div>
	<div class="paw"><svg class="icon"><use xlink:href="#paw" /></svg></div>
	<div class="paw"><svg class="icon"><use xlink:href="#paw" /></svg></div>
</div>

.ajax-loader{
	position: absolute;
	top: 25%;
	left: 50%;
	transform-origin: 50% 50%;
	transform: rotate(90deg) translate(-50%, 0%);
	font-size: 50px;
	width: 1em;
	height: 3em;
	color: #d31145;

	.paw{
		width: 1em;
		height: 1em;
		animation: 2050ms pawAnimation ease-in-out infinite;
		opacity: 0;
		
		svg{
			width: 100%;
			height: 100%;
		}
		
		.icon{
			fill: currentColor;
		}

		&:nth-child(odd){
			transform: rotate(-10deg);
		}

		&:nth-child(even){
			transform: rotate(10deg) translate(125%, 0);
		}

		@for $i from 1 through 6{
            &:nth-child(#{$i}){
            	animation-delay: #{ (($i * -1)+6)*0.25 }s;
            }
        }

        .no-cssanimations &{
        	opacity: 1;
        }
	}
}

@keyframes pawAnimation {
	0%{
		opacity: 1;
	}
	50%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	}
}