.loadingspinner{--square:32px;--offset:36px;--duration:2.4s;--delay:0.2s;--timing-function:ease-in-out;--in-duration:0.4s;--in-delay:0.1s;--in-timing-function:ease-out;width:calc(3 * var(--offset) + var(--square));height:calc(2 * var(--offset) + var(--square));position:relative;margin:0 auto}.loadingspinner div{display:flex;align-items:center;justify-content:center;background:#8B3A9C;border-radius:4px;width:var(--square);height:var(--square);position:absolute;font-size:14px;font-weight:700;color:white;box-shadow:0 2px 5px rgba(0,0,0,.1)}#square1{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}#square1,#square2{left:calc(0 * var(--offset))}#square2{animation:square2 var(--duration) var(--delay) var(--timing-function) infinite,squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both}#square2,#square3{top:calc(1 * var(--offset))}#square3{left: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}#square4{left:calc(2 * 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}#square4,#square5{top:calc(1 * var(--offset))}#square5{left:calc(3 * 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:0;top:0}8.333%{left:0;top:var(--offset)}to{left:0;top:var(--offset)}}@keyframes square2{0%{left:0;top:var(--offset)}8.333%{left:0;top:calc(2 * var(--offset))}16.67%{left:var(--offset);top:calc(2 * var(--offset))}25%{left:var(--offset);top:var(--offset)}83.33%{left:var(--offset);top:var(--offset)}91.67%{left:var(--offset);top:0}to{left:0;top:0}}@keyframes square3{0%,to{left:var(--offset);top:var(--offset)}16.67%{left:var(--offset);top:var(--offset)}25%{left:var(--offset);top:0}33.33%{left:calc(2 * var(--offset));top:0}41.67%{left:calc(2 * var(--offset));top:var(--offset)}66.67%{left:calc(2 * var(--offset));top:var(--offset)}75%{left:calc(2 * var(--offset));top:calc(2 * var(--offset))}83.33%{left:var(--offset);top:calc(2 * var(--offset))}91.67%{left:var(--offset);top:var(--offset)}}@keyframes square4{0%{left:calc(2 * var(--offset));top:var(--offset)}33.33%{left:calc(2 * var(--offset));top: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:var(--offset)}to{left:calc(3 * var(--offset));top:var(--offset)}}@keyframes square5{0%{left:calc(3 * var(--offset));top:var(--offset)}50%{left:calc(3 * var(--offset));top:var(--offset)}58.33%{left:calc(3 * var(--offset));top:0}66.67%{left:calc(2 * var(--offset));top:0}75%{left:calc(2 * var(--offset));top:var(--offset)}to{left:calc(2 * var(--offset));top:var(--offset)}}@keyframes squarefadein{0%{transform:scale(.75);opacity:0}to{transform:scale(1);opacity:1}}