<!-- - CSS3 Preloaders - https://danielpietrasik.pl/css3-preloaders-pasek-ladowania/ --> <div class="preloader"></div>
/** * CSS3 Preloaders * https://danielpietrasik.pl/css3-preloaders-pasek-ladowania/ **/ .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); } }