:root{--size:calc(100vw/5);--neon:GoldenRod;--timer:1s}.spinner-wrapper{background:var(--color-primary-9);justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:absolute;top:0;left:0}@keyframes animate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loader{width:var(--size);height:var(--size);animation:animate calc(var(--timer)*3)linear infinite;position:absolute}.loader span{inset:calc(var(--size)*.1);background:var(--color-primary-9);border-radius:50%;position:absolute}div[class*=segment]:before{content:"";background:linear-gradient(to top,transparent,var(--neon));background-size:calc(var(--size)*.5)calc(var(--size)*.6);border-top-left-radius:calc(var(--size)*.5);border-bottom-left-radius:calc(var(--size)*.5);background-repeat:no-repeat;width:50%;height:100%;position:absolute;top:0;left:0}.segment1{animation-delay:calc(var(--timer)*0)}.segment2{animation-delay:calc(var(--timer)*-1)}.segment3{animation-delay:calc(var(--timer)*-2)}.loader i{width:calc(var(--size)*.1);height:calc(var(--size)*.1);background:var(--neon);box-shadow:0 0 calc(var(--size)*.1)var(--neon),0 0 calc(var(--size)*.2)var(--neon),0 0 calc(var(--size)*.3)var(--neon),0 0 calc(var(--size)*.4)var(--neon),0 0 calc(var(--size)*.5)var(--neon);border-radius:50%;position:absolute;top:0;left:50%;transform:translate(-50%)}