<!--
- CSS3 Preloaders
- https://danielpietrasik.pl/css3-preloaders-pasek-ladowania/
-->
<div class="preloader"></div>
/**
* CSS3 Preloaders
* https://danielpietrasik.pl/css3-preloaders-pasek-ladowania/
**/
.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, 83, 0.5), 0 57px 0 0 rgba(243, 74, 83, 0.7), -40px 40px 0 0 #F34A53, -59px 0 0 0 rgba(243, 74, 83, 0.2), -40px -40px 0 0 rgba(243, 74, 83, 0.2);
}
75% {
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, 83, 0.2), 0 57px 0 0 rgba(243, 74, 83, 0.5), -40px 40px 0 0 rgba(243, 74, 83, 0.7), -59px 0 0 0 #F34A53, -40px -40px 0 0 rgba(243, 74, 83, 0.2);
}
87.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, 83, 0.2), 0 57px 0 0 rgba(243, 74, 83, 0.2), -40px 40px 0 0 rgba(243, 74, 83, 0.5), -59px 0 0 0 rgba(243, 74, 83, 0.7), -40px -40px 0 0 #F34A53;
}
}