.spinner{width:80px;height:80px;--clr:rgb(127,207,255);--clr-alpha:rgb(127,207,255,.1);animation:spinner 2s infinite linear;transform-style:preserve-3d}.spinner>div{background-color:var(--clr-alpha);height:100%;position:absolute;width:100%;border:5px solid var(--clr)}.spinner div:nth-of-type(1){transform:translateZ(-40px) rotateY(180deg)}.spinner div:nth-of-type(2){transform:rotateY(-270deg) translateX(50%);transform-origin:top right}.spinner div:nth-of-type(3){transform:rotateY(270deg) translateX(-50%);transform-origin:center left}.spinner div:nth-of-type(4){transform:rotateX(90deg) translateY(-50%);transform-origin:top center}.spinner div:nth-of-type(5){transform:rotateX(-90deg) translateY(50%);transform-origin:bottom center}.spinner div:nth-of-type(6){transform:translateZ(40px)}@keyframes spinner{0%{transform:rotate(0deg) rotateX(0deg) rotateY(0deg)}50%{transform:rotate(180deg) rotateX(180deg) rotateY(180deg)}100%{transform:rotate(360deg) rotateX(360deg) rotateY(360deg)}}.main{display:flex;align-items:center;justify-content:center}.loaders,.loadersB{display:flex;align-items:center;justify-content:center}.loader{position:absolute;width:1.15em;height:13em;border-radius:50px;background:#e0e0e0}.loader:after{content:"";position:absolute;left:0;top:0;width:1.15em;height:5em;background:#e0e0e0;border-radius:50px;border:1px solid #e2e2e2;box-shadow:inset 5px 5px 15px #d3d2d2ab,inset -5px -5px 15px #e9e9e9ab;mask-image:linear-gradient(to bottom,black calc(100% - 48px),transparent 100%)}.loader::before{content:"";position:absolute;bottom:0;right:0;width:1.15em;height:4.5em;background:#e0e0e0;border-radius:50px;border:1px solid #e2e2e2;box-shadow:inset 5px 5px 15px #d3d2d2ab,inset -5px -5px 15px #e9e9e9ab;mask-image:linear-gradient(to top,black calc(100% - 48px),transparent 100%)}.loaderA{position:absolute;width:1.15em;height:13em;border-radius:50px;background:transparent}.ball0,.ball1,.ball2,.ball3,.ball4,.ball5,.ball6,.ball7,.ball8,.ball9{width:1.15em;height:1.15em;box-shadow:rgba(0,0,0,0.17) 0px -10px 10px 0px inset,rgba(0,0,0,0.15) 0px -15px 15px 0px inset,rgba(0,0,0,0.1) 0px -40px 20px 0px inset,rgba(0,0,0,0.06) 0px 2px 1px,rgba(0,0,0,0.09) 0px 4px 2px,rgba(0,0,0,0.09) 0px 8px 4px,rgba(0,0,0,0.09) 0px 16px 8px,rgba(0,0,0,0.09) 0px 32px 16px,0px -1px 15px -8px rgba(0,0,0,0.09);border-radius:50%;transition:transform 800ms cubic-bezier(1,-0.4,0,1.4);background-color:rgb(232,232,232,1);animation:3.63s move ease-in-out infinite}.loader:nth-child(2){transform:rotate(20deg)}.loader:nth-child(3){transform:rotate(40deg)}.loader:nth-child(4){transform:rotate(60deg)}.loader:nth-child(5){transform:rotate(80deg)}.loader:nth-child(6){transform:rotate(100deg)}.loader:nth-child(7){transform:rotate(120deg)}.loader:nth-child(8){transform:rotate(140deg)}.loader:nth-child(9){transform:rotate(160deg)}.loaderA:nth-child(2){transform:rotate(20deg)}.loaderA:nth-child(3){transform:rotate(40deg)}.loaderA:nth-child(4){transform:rotate(60deg)}.loaderA:nth-child(5){transform:rotate(80deg)}.loaderA:nth-child(6){transform:rotate(100deg)}.loaderA:nth-child(7){transform:rotate(120deg)}.loaderA:nth-child(8){transform:rotate(140deg)}.loaderA:nth-child(9){transform:rotate(160deg)}.ball1{animation-delay:0.2s}.ball2{animation-delay:0.4s}.ball3{animation-delay:0.6s}.ball4{animation-delay:0.8s}.ball5{animation-delay:1s}.ball6{animation-delay:1.2s}.ball7{animation-delay:1.4s}.ball8{animation-delay:1.6s}.ball9{animation-delay:1.8s}@keyframes move{0%{transform:translateY(0em)}50%{transform:translateY(12em)}100%{transform:translateY(0em)}}