<!-- - CSS3 Preloaders - https://danielpietrasik.pl/animacje-css --> <div class="preloader"></div>
/** * CSS3 Preloaders * https://danielpietrasik.pl/animacje-css **/ .preloader { margin: 100px auto 0; width: 20px; height: 20px; border-radius: 50%; animation: animation 1.3s infinite linear; } @keyframes animation { 0%, 100% { box-shadow: 0 -60px 0 0.40px #F34A53, 40px -40px 0 0 #F34A53, 60px 0 0 -10px #F34A53, 40px 40px 0 -10px #F34A53, 0 60px 0 -10px #F34A53, -40px 40px 0 -10px #F34A53, -60px 0 0 -10px #F34A53, -40px -40px 0 0 #F34A53; } 12.5% { box-shadow: 0 -60px 0 0 #F34A53, 40px -40px 0 0.40px #F34A53, 60px 0 0 0 #F34A53, 40px 40px 0 -10px #F34A53, 0 60px 0 -10px #F34A53, -40px 40px 0 -10px #F34A53, -60px 0 0 -10px #F34A53, -40px -40px 0 -10px #F34A53; } 25% { box-shadow: 0 -60px 0 -10px #F34A53, 40px -40px 0 0 #F34A53, 60px 0 0 0.40px #F34A53, 40px 40px 0 0 #F34A53, 0 60px 0 -10px #F34A53, -40px 40px 0 -10px #F34A53, -60px 0 0 -10px #F34A53, -40px -40px 0 -10px #F34A53; } 37.5% { box-shadow: 0 -60px 0 -10px #F34A53, 40px -40px 0 -10px #F34A53, 60px 0 0 0 #F34A53, 40px 40px 0 0.40px #F34A53, 0 60px 0 0 #F34A53, -40px 40px 0 -10px #F34A53, -60px 0 0 -10px #F34A53, -40px -40px 0 -10px #F34A53; } 50% { box-shadow: 0 -60px 0 -10px #F34A53, 40px -40px 0 -10px #F34A53, 60px 0 0 -10px #F34A53, 40px 40px 0 0 #F34A53, 0 60px 0 0.40px #F34A53, -40px 40px 0 0 #F34A53, -60px 0 0 -10px #F34A53, -40px -40px 0 -10px #F34A53; } 62.5% { box-shadow: 0 -60px 0 -10px #F34A53, 40px -40px 0 -10px #F34A53, 60px 0 0 -10px #F34A53, 40px 40px 0 -10px #F34A53, 0 60px 0 0 #F34A53, -40px 40px 0 0.40px #F34A53, -60px 0 0 0 #F34A53, -40px -40px 0 -10px #F34A53; } 75% { box-shadow: 0 -60px 0 -10px #F34A53, 40px -40px 0 -10px #F34A53, 60px 0 0 -10px #F34A53, 40px 40px 0 -10px #F34A53, 0 60px 0 -10px #F34A53, -40px 40px 0 0 #F34A53, -60px 0 0 0.40px #F34A53, -40px -40px 0 0 #F34A53; } 87.5% { box-shadow: 0 -60px 0 0 #F34A53, 40px -40px 0 -10px #F34A53, 60px 0 0 -10px #F34A53, 40px 40px 0 -10px #F34A53, 0 60px 0 -10px #F34A53, -40px 40px 0 0 #F34A53, -60px 0 0 0 #F34A53, -40px -40px 0 0.40px #F34A53; } }