.loadingspinner{--square:40px;--offset:50px;--duration:2.4s;--delay:.2s;--timing-function:ease-in-out;--in-duration:.4s;--in-delay:.1s;--in-timing-function:ease-out;width:calc(3*var(--offset) + var(--square));height:calc(2*var(--offset) + var(--square));margin:10px auto 30px;padding:0;position:relative}.loadingspinner div{width:var(--square);height:var(--square);color:#000;background:#daa520;border:none;border-radius:2px;margin:0;padding:0;font-size:6pt;display:inline-block;position:absolute}.loadingspinner #square1{left:calc(0*var(--offset));top:calc(0*var(--offset));animation:square1 var(--duration)var(--delay)var(--timing-function)infinite,squarefadein var(--in-duration)calc(1*var(--in-delay))var(--in-timing-function)both}.loadingspinner #square2{left:calc(0*var(--offset));top:calc(1*var(--offset));animation:square2 var(--duration)var(--delay)var(--timing-function)infinite,squarefadein var(--in-duration)calc(1*var(--in-delay))var(--in-timing-function)both}.loadingspinner #square3{left:calc(1*var(--offset));top:calc(1*var(--offset));animation:square3 var(--duration)var(--delay)var(--timing-function)infinite,squarefadein var(--in-duration)calc(2*var(--in-delay))var(--in-timing-function)both}.loadingspinner #square4{left:calc(2*var(--offset));top:calc(1*var(--offset));animation:square4 var(--duration)var(--delay)var(--timing-function)infinite,squarefadein var(--in-duration)calc(3*var(--in-delay))var(--in-timing-function)both}.loadingspinner #square5{left:calc(3*var(--offset));top:calc(1*var(--offset));animation:square5 var(--duration)var(--delay)var(--timing-function)infinite,squarefadein var(--in-duration)calc(4*var(--in-delay))var(--in-timing-function)both}@keyframes square1{0%{left:calc(0*var(--offset));top:calc(0*var(--offset))}8.333%{left:calc(0*var(--offset));top:calc(1*var(--offset))}to{left:calc(0*var(--offset));top:calc(1*var(--offset))}}@keyframes square2{0%{left:calc(0*var(--offset));top:calc(1*var(--offset))}8.333%{left:calc(0*var(--offset));top:calc(2*var(--offset))}16.67%{left:calc(1*var(--offset));top:calc(2*var(--offset))}25%{left:calc(1*var(--offset));top:calc(1*var(--offset))}83.33%{left:calc(1*var(--offset));top:calc(1*var(--offset))}91.67%{left:calc(1*var(--offset));top:calc(0*var(--offset))}to{left:calc(0*var(--offset));top:calc(0*var(--offset))}}@keyframes square3{0%,to{left:calc(1*var(--offset));top:calc(1*var(--offset))}16.67%{left:calc(1*var(--offset));top:calc(1*var(--offset))}25%{left:calc(1*var(--offset));top:calc(0*var(--offset))}33.33%{left:calc(2*var(--offset));top:calc(0*var(--offset))}41.67%{left:calc(2*var(--offset));top:calc(1*var(--offset))}66.67%{left:calc(2*var(--offset));top:calc(1*var(--offset))}75%{left:calc(2*var(--offset));top:calc(2*var(--offset))}83.33%{left:calc(1*var(--offset));top:calc(2*var(--offset))}91.67%{left:calc(1*var(--offset));top:calc(1*var(--offset))}}@keyframes square4{0%{left:calc(2*var(--offset));top:calc(1*var(--offset))}33.33%{left:calc(2*var(--offset));top:calc(1*var(--offset))}41.67%{left:calc(2*var(--offset));top:calc(2*var(--offset))}50%{left:calc(3*var(--offset));top:calc(2*var(--offset))}58.33%{left:calc(3*var(--offset));top:calc(1*var(--offset))}to{left:calc(3*var(--offset));top:calc(1*var(--offset))}}@keyframes square5{0%{left:calc(3*var(--offset));top:calc(1*var(--offset))}50%{left:calc(3*var(--offset));top:calc(1*var(--offset))}58.33%{left:calc(3*var(--offset));top:calc(0*var(--offset))}66.67%{left:calc(2*var(--offset));top:calc(0*var(--offset))}75%{left:calc(2*var(--offset));top:calc(1*var(--offset))}to{left:calc(2*var(--offset));top:calc(1*var(--offset))}}@keyframes squarefadein{0%{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}