.preloader{position:relative;width:100px;height:100px;animation:rotate 2s linear infinite}.circle{position:absolute;width:24px;height:24px;border-radius:50%;background:var(--spinner-color);animation:move 2s ease-in-out infinite}.circle:first-child{top:0;left:0;animation-name:move1}.circle:nth-child(2){top:0;right:0;animation-name:move2}.circle:nth-child(3){bottom:0;left:0;animation-name:move3}.circle:nth-child(4){bottom:0;right:0;animation-name:move4}@keyframes rotate{0%{transform:rotate(0deg)}10%{transform:rotate(180deg)}to{transform:rotate(180deg)}}@keyframes move1{0%,75%,to{transform:translate(0)}25%,50%{transform:translate(40px,40px)}}@keyframes move2{0%,75%,to{transform:translate(0)}25%,50%{transform:translate(-40px,40px)}}@keyframes move3{0%,75%,to{transform:translate(0)}25%,50%{transform:translate(40px,-40px)}}@keyframes move4{0%,75%,to{transform:translate(0)}25%,50%{transform:translate(-40px,-40px)}}