: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%)}