Loader

Html

<div class="loader">
	<div class="loader__circle"></div>
	<div class="loader__circle loader__circle--delay"></div>
</div>

Scss

		
.loader {
	width: 4rem;
	height: 4rem;
	position: absolute;
	left:4rem;
	top:2.5rem;
	

	&__circle {
		width: 100%;
		height: 100%;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		background-color: rgba($color-blue-tory, .66);
		opacity: .6;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-animation: animation 2s infinite ease-in-out;
		animation: animation 2s infinite ease-in-out;

		&--delay {
			-webkit-animation-delay: -1s;
			animation-delay: -1s;
		}
	}
}


@-webkit-keyframes animation {
	0%, 100% {
		-webkit-transform: scale(0);
	}

	50% {
		-webkit-transform: scale(1);
	}
}

@keyframes animation {
	0%, 100% {
		transform: scale(0);
		-webkit-transform: scale(0);
	}

	50% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
}