Preloader

https://danielpietrasik.pl/css3-preloaders-pasek-ladowania/

by Daniel Pietrasik

HTML

<!-- 
 - CSS3 Preloaders
 - https://danielpietrasik.pl/css3-preloaders-pasek-ladowania/
-->

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

CSS

/**
 * CSS3 Preloaders
 * https://danielpietrasik.pl/css3-preloaders-pasek-ladowania/
 **/

body {
  background: #fff;
}

.preloader {
	margin: 85px auto;
	width: 24px;
	height: 24px;
	border-radius: 100%;
	animation: animation 1.1s infinite ease;
}

@keyframes animation {
	0%,
	100% {
		box-shadow: 0 -59px 0 0 #F34A53, 40px -40px 0 0 rgba(243, 74, 83, 0.2), 57px 0 0 0 rgba(243, 74, 83, 0.2), 39px 39px 0 0 rgba(243, 74, 83, 0.2), 0 57px 0 0 rgba(243, 74, 83, 0.2), -40px 40px 0 0 rgba(243, 74, 83, 0.2), -59px 0 0 0 rgba(243, 74, 83, 0.5), -40px -40px 0 0 rgba(243, 74, 83, 0.7);
	}
	12.5% {
		box-shadow: 0 -59px 0 0 rgba(243, 74, 83, 0.7), 40px -40px 0 0 #F34A53, 57px 0 0 0 rgba(243, 74, 83, 0.2), 39px 39px 0 0 rgba(243, 74, 83, 0.2), 0 57px 0 0 rgba(243, 74, 83, 0.2), -40px 40px 0 0 rgba(243, 74, 83, 0.2), -59px 0 0 0 rgba(243, 74, 83, 0.2), -40px -40px 0 0 rgba(243, 74, 83, 0.5);
	}
	25% {
		box-shadow: 0 -59px 0 0 rgba(243, 74, 83, 0.5), 40px -40px 0 0 rgba(243, 74, 83, 0.7), 57px 0 0 0 #F34A53, 39px 39px 0 0 rgba(243, 74, 83, 0.2), 0 57px 0 0 rgba(243, 74, 83, 0.2), -40px 40px 0 0 rgba(243, 74, 83, 0.2), -59px 0 0 0 rgba(243, 74, 83, 0.2), -40px -40px 0 0 rgba(243, 74, 83, 0.2);
	}
	37.5% {
		box-shadow: 0 -59px 0 0 rgba(243, 74, 83, 0.2), 40px -40px 0 0 rgba(243, 74, 83, 0.5), 57px 0 0 0 rgba(243, 74, 83, 0.7), 39px 39px 0 0 rgba(243, 74, 83, 0.2), 0 57px 0 0 rgba(243, 74, 83, 0.2), -40px 40px 0 0 rgba(243, 74, 83, 0.2), -59px 0 0 0 rgba(243, 74, 83, 0.2), -40px -40px 0 0 rgba(243, 74, 83, 0.2);
	}
	50% {
		box-shadow: 0 -59px 0 0 rgba(243, 74, 83, 0.2), 40px -40px 0 0 rgba(243, 74, 83, 0.2), 57px 0 0 0 rgba(243, 74, 83, 0.5), 39px 39px 0 0 rgba(243, 74, 83, 0.7), 0 57px 0 0 #F34A53, -40px 40px 0 0 rgba(243, 74, 83, 0.2), -59px 0 0 0 rgba(243, 74, 83, 0.2), -40px -40px 0 0 rgba(243, 74, 83, 0.2);
	}
	62.5% {
		box-shadow: 0 -59px 0 0 rgba(243, 74, 83, 0.2), 40px -40px 0 0 rgba(243, 74, 83, 0.2), 57px 0 0 0 rgba(243, 74, 83, 0.2), 39px 39px 0 0 rgba(243, 74,...