Preloader

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

by Daniel Pietrasik

HTML

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

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

CSS

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

body {
  background: #fff;
}

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

.preloader:before {
	width: 52px;
	height: 102px;
	background: #FFF;
	border-radius: 50% 0 0 50%;
	top: -1px;
	left: -1px;
	transform-origin: 52px 51px;
	animation: animation 1.6s infinite ease 1.2s;
}

.preloader {
	margin: 40px auto;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 13px #F34A53;
	transform: translateZ(0);
}

.preloader:after {
	width: 52px;
	height: 102px;
	background: #FFF;
	border-radius: 0 50% 50% 0;
	top: -1px;
	left: 51px;
	transform-origin: 0px 51px;
	animation: animation 1.6s infinite ease;
}

@keyframes animation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}