Preloader

https://danielpietrasik.pl/animacje-css

by Daniel Pietrasik

HTML

<!-- 
 - CSS3 Preloaders
 - https://danielpietrasik.pl/animacje-css
-->

<div class="preloader"></div>

CSS

/**
 * CSS3 Preloaders
 * https://danielpietrasik.pl/animacje-css
 **/

.preloader {
	margin: 65px auto 0;
	font-size: 13px;
	transform: translateZ(0);
}

.preloader:before,
.preloader:after {
	content: '';
	position: absolute;
	top: 0;
}

.preloader:before,
.preloader:after,
.preloader {
	border-radius: 50%;
	width: 2em;
	height: 2em;
	animation: animation 1.2s infinite ease-in-out;
}

.preloader {
	animation-delay: -0.16s;
}

.preloader:before {
	left: -3.5em;
	animation-delay: -0.32s;
}

.preloader:after {
	left: 3.5em;
}

@keyframes animation {
	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em #F34A53;
	}
	40% {
		box-shadow: 0 2.5em 0 0 #F34A53;
	}
}