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: 50px auto 0;
	border-top: 12px solid rgba(243, 74, 83, 0.2);
	border-right: 12px solid rgba(243, 74, 83, 0.2);
	border-bottom: 12px solid rgba(243, 74, 83, 0.2);
	border-left: 12px solid #F34A53;
	animation: animation 1.1s infinite linear;
	border-radius: 100%;
	width: 60px;
	height: 60px;
}

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