.loader{width:220px;height:220px;border-radius:50%;position:relative;border:5px solid #0000;box-shadow:5px 5px 5px #0c0c0c,inset 5px 5px 5px #181717,inset -1px -1px 10px hsla(0,2%,59%,.432),-1px -1px 10px hsla(0,8%,79%,.281)}.loader:before{content:"";width:180px;height:180px;transform:translate(-50%,-50%);box-shadow:5px 5px 20px #000,-2px -2px 40px #000;background:repeating-conic-gradient(#3d3b3b 0,hsla(60,12%,97%,.534) 15%,#363434 33.33%)}.ball,.loader:before{display:inline-block;position:absolute;border-radius:50%;top:50%;left:50%}.ball{width:15px;height:15px;background:radial-gradient(circle at 5px 5px,#fff 1%,#050505 50%);transform:translate(-50%,-50%) translateX(97.5px);animation:rotate 5s calc(var(--delay) * .2s) infinite linear}@keyframes rotate{0%{transform:translate(-50%,-50%) rotate(0deg) translateX(97.5px)}to{transform:translate(-50%,-50%) rotate(1turn) translateX(97.5px)}}