.lds-circle { display: inline-block; transform: translateZ(1px); } .lds-circle > div { display: inline-block; width: 64px; height: 64px; margin: 8px; border-radius: 50%; border: 1px solid linear-gradient(#ffe00e, #b8a000); background: #ffde00; box-shadow: 0px 0px 9px 3px #d4b900 inset, 0px 0px 10px 13px #ffeb63 inset, 0px 30px 19px -25px; animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite; } @keyframes lds-circle { 0%, 100% { animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); } 0% { transform: rotateY(0deg); } 50% { transform: rotateY(1800deg); animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); } 100% { transform: rotateY(3600deg); } }