.loadingspinner{--square:26px;--offset:30px;--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:auto auto 10px;padding:0;position:relative}.loadingspinner div{width:var(--square);height:var(--square);color:#000;background:#ff8c00;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)}}.loader-wrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none;color:#fff;justify-content:center;align-items:center;width:auto;height:-moz-fit-content;height:fit-content;margin-bottom:auto;font-size:1.6em;font-weight:600;display:flex;position:relative;scale:2}.loader{z-index:1;background-color:transparent;width:100%;height:100%;position:absolute;top:0;left:0;-webkit-mask:repeating-linear-gradient(90deg,transparent 0,transparent 6px,#000 7px,#000 8px);mask:repeating-linear-gradient(90deg,transparent 0,transparent 6px,#000 7px,#000 8px)}.loader:after{content:"";background-image:radial-gradient(circle,#ff0 0%,transparent 50%),radial-gradient(circle at 45% 45%,red 0%,transparent 45%),radial-gradient(circle at 55% 55%,#0ff 0%,transparent 45%),radial-gradient(circle at 45% 55%,#0f0 0%,transparent 45%),radial-gradient(circle at 55% 45%,#00f 0%,transparent 45%);width:100%;height:100%;animation-name:transform-animation,opacity-animation;animation-duration:2s,4s;animation-timing-function:cubic-bezier(.6,.8,.5,1);animation-iteration-count:infinite,infinite;animation-direction:alternate,normal;animation-play-state:running,running;animation-delay:0s,0s;animation-fill-mode:none,none;animation-timeline:auto,auto;position:absolute;top:0;left:0;-webkit-mask:radial-gradient(circle,transparent 0%,transparent 10%,#000 25%);mask:radial-gradient(circle,transparent 0%,transparent 10%,#000 25%)}@keyframes transform-animation{0%{transform:translate(-55%)}to{transform:translate(55%)}}@keyframes opacity-animation{0%,to{opacity:0}15%{opacity:1}65%{opacity:0}}.loader-letter{opacity:0;z-index:2;color:#333;font-size:.75rem;font-weight:lighter;animation:4s linear infinite loader-letter-anim;display:inline-block}.loader-letter:first-child{animation-delay:.1s}.loader-letter:nth-child(2){animation-delay:.205s}.loader-letter:nth-child(3){animation-delay:.31s}.loader-letter:nth-child(4){animation-delay:.415s}.loader-letter:nth-child(5){animation-delay:.521s}.loader-letter:nth-child(6){animation-delay:.626s}.loader-letter:nth-child(7){animation-delay:.731s}.loader-letter:nth-child(8){animation-delay:.837s}.loader-letter:nth-child(9){animation-delay:.942s}.loader-letter:nth-child(10){animation-delay:1.047s}@keyframes loader-letter-anim{0%{opacity:0}5%{opacity:1;text-shadow:0 0 4px #999;transform:scale(1.1)translateY(-2px)}20%{opacity:.2}to{opacity:0}}