.preloader-ripple-plain { display: inline-block; position: relative; width: 80px; height: 80px; } .preloader-ripple-plain div { display: inline-block; position: absolute; left: 8px; width: 16px; background: #fff; animation: preloader-ripple-plain 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite; } .preloader-ripple-plain div:nth-child(1) { left: 8px; animation-delay: -0.24s; } .preloader-ripple-plain div:nth-child(2) { left: 32px; animation-delay: -0.12s; } .preloader-ripple-plain div:nth-child(3) { left: 56px; animation-delay: 0; } @keyframes preloader-ripple-plain { 0% { top: 8px; height: 64px; } 50%, 100% { top: 24px; height: 32px; } }