.preloader-ripple-circle { display: inline-block; position: relative; width: 80px; height: 80px; } .preloader-ripple-circle div { position: absolute; border: 4px solid #fff; opacity: 1; border-radius: 50%; animation: preloader-ripple-circle 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .preloader-ripple-circle div:nth-child(2) { animation-delay: -0.5s; } @keyframes preloader-ripple-circle { 0% { top: 36px; left: 36px; width: 0; height: 0; opacity: 0; } 4.9% { top: 36px; left: 36px; width: 0; height: 0; opacity: 0; } 5% { top: 36px; left: 36px; width: 0; height: 0; opacity: 1; } 100% { top: 0px; left: 0px; width: 72px; height: 72px; opacity: 0; } }