.spinner{--size:80px;--dot:calc(var(--size) * .09);width:var(--size);height:var(--size);box-sizing:border-box;display:inline-block;position:relative;& div{box-sizing:border-box;transform-origin:calc(var(--size) / 2) calc(var(--size) / 2);--angle:calc(30deg + var(--i) * 15deg);animation:1.2s cubic-bezier(.5,0,.5,1) infinite spinner;animation-delay:calc(var(--i) * -.036s);&:after{content:" ";width:var(--dot);height:var(--dot);margin:calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);box-sizing:border-box;top:calc(var(--size) * (.5 + .4 * sin(var(--angle))));left:calc(var(--size) * (.5 + .4 * cos(var(--angle))));background:currentColor;border-radius:50%;display:block;position:absolute}&:first-child{--i:1}&:nth-child(2){--i:2}&:nth-child(3){--i:3}&:nth-child(4){--i:4}&:nth-child(5){--i:5}&:nth-child(6){--i:6}&:nth-child(7){--i:7}&:nth-child(8){--i:8}}}@keyframes spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}