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: 100px auto 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	animation: animation 1.3s infinite linear;
}

@keyframes animation {
	0%,
	100% {
		box-shadow: 0 -60px 0 0.40px #F34A53, 40px -40px 0 0 #F34A53, 60px 0 0 -10px #F34A53, 40px 40px 0 -10px #F34A53, 0 60px 0 -10px #F34A53, -40px 40px 0 -10px #F34A53, -60px 0 0 -10px #F34A53, -40px -40px 0 0 #F34A53;
	}
	12.5% {
		box-shadow: 0 -60px 0 0 #F34A53, 40px -40px 0 0.40px #F34A53, 60px 0 0 0 #F34A53, 40px 40px 0 -10px #F34A53, 0 60px 0 -10px #F34A53, -40px 40px 0 -10px #F34A53, -60px 0 0 -10px #F34A53, -40px -40px 0 -10px #F34A53;
	}
	25% {
		box-shadow: 0 -60px 0 -10px #F34A53, 40px -40px 0 0 #F34A53, 60px 0 0 0.40px #F34A53, 40px 40px 0 0 #F34A53, 0 60px 0 -10px #F34A53, -40px 40px 0 -10px #F34A53, -60px 0 0 -10px #F34A53, -40px -40px 0 -10px #F34A53;
	}
	37.5% {
		box-shadow: 0 -60px 0 -10px #F34A53, 40px -40px 0 -10px #F34A53, 60px 0 0 0 #F34A53, 40px 40px 0 0.40px #F34A53, 0 60px 0 0 #F34A53, -40px 40px 0 -10px #F34A53, -60px 0 0 -10px #F34A53, -40px -40px 0 -10px #F34A53;
	}
	50% {
		box-shadow: 0 -60px 0 -10px #F34A53, 40px -40px 0 -10px #F34A53, 60px 0 0 -10px #F34A53, 40px 40px 0 0 #F34A53, 0 60px 0 0.40px #F34A53, -40px 40px 0 0 #F34A53, -60px 0 0 -10px #F34A53, -40px -40px 0 -10px #F34A53;
	}
	62.5% {
		box-shadow: 0 -60px 0 -10px #F34A53, 40px -40px 0 -10px #F34A53, 60px 0 0 -10px #F34A53, 40px 40px 0 -10px #F34A53, 0 60px 0 0 #F34A53, -40px 40px 0 0.40px #F34A53, -60px 0 0 0 #F34A53, -40px -40px 0 -10px #F34A53;
	}
	75% {
		box-shadow: 0 -60px 0 -10px #F34A53, 40px -40px 0 -10px #F34A53, 60px 0 0 -10px #F34A53, 40px 40px 0 -10px #F34A53, 0 60px 0 -10px #F34A53, -40px 40px 0 0 #F34A53, -60px 0 0 0.40px #F34A53, -40px -40px 0 0 #F34A53;
	}
	87.5% {
		box-shadow: 0 -60px 0 0 #F34A53, 40px -40px 0 -10px #F34A53, 60px 0 0 -10px #F34A53, 40px 40px 0 -10px #F34A53, 0 60px 0 -10px #F34A53, -40px 40px 0 0...