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:before,
.preloader:after {
	position: absolute;
	content: '';  
}

.preloader {
	margin: 60px auto 0;
	width: 70px;
	height: 70px;
	border-radius: 100%;
	background: linear-gradient(to right, #F34A53 10%, rgba(243, 74, 83, 0) 42%);
	animation: animation 1.4s infinite linear;
}

.preloader:before {
	width: 50%;
	height: 50%;
	background: #F34A53;
	border-radius: 100% 0 0 0;
}

.preloader:after {
	background: #fff;
	width: 70%;
	height: 70%;
	border-radius: 100%;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

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