section{display:flex;align-items:center;justify-content:center;animation:animateBg 10s linear infinite;height:100vh;background-color:var(--background-color)}section .loader{position:relative;width:120px;height:120px}section span{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(calc(18deg * var(--i)))}section span:before{content:"";position:absolute;top:0;left:0;width:15px;height:15px;border-radius:50%;box-shadow:0 0 10px var(--primary-color),0 0 20px var(--primary-color),0 0 40px var(--primary-color),0 0 60px var(--primary-color),0 0 80px var(--primary-color),0 0 100px var(--primary-color);animation:animate 2s linear infinite;animation-delay:calc(.1s*var(--i))}@keyframes animateBg{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(1turn)}}@keyframes animate{0%{transform:scale(1)}80%,to{transform:scale(0)}}