.text-tip{margin-top:100px;font-size:14px;font-weight:600;letter-spacing:1px}.container{display:flex;width:100%;height:100vh;align-items:center;justify-content:center}.loader{--size:32px;--duration:800ms;width:96px;height:64px;margin:50px auto;transform-style:preserve-3d;transform-origin:50% 50%;transform:rotateX(60deg) rotate(45deg) rotateY(0deg) translateZ(0);position:relative}.loader .box{width:32px;height:32px;transform-style:preserve-3d;position:absolute;top:0;left:0}.loader .box:first-child{transform:translate(100%);animation:box1 .8s linear infinite}.loader .box:nth-child(2){transform:translateY(100%);animation:box2 .8s linear infinite}.loader .box:nth-child(3){transform:translate(100%,100%);animation:box3 .8s linear infinite}.loader .box:nth-child(4){transform:translate(200%);animation:box4 .8s linear infinite}.loader .box>div{--translateZ:calc(var(--size)/2);--rotateY:0deg;--rotateX:0deg;background:#5c8df6;width:100%;height:100%;transform:rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));position:absolute;top:auto;right:auto;bottom:auto;left:auto}.loader .box>div:first-child{top:0;left:0}.loader .box>div:nth-child(2){background:#145af2;right:0;--rotateY:90deg}.loader .box>div:nth-child(3){background:#447cf5;--rotateX:-90deg}.loader .box>div:nth-child(4){background:#dbe3f4;top:0;left:0;--translateZ:calc(var(--size)*3*-1)}@keyframes box1{0%,50%{transform:translate(100%)}to{transform:translate(200%)}}@keyframes box2{0%{transform:translateY(100%)}50%{transform:translate(0)}to{transform:translate(100%)}}@keyframes box3{0%,50%{transform:translate(100%,100%)}to{transform:translateY(100%)}}@keyframes box4{0%{transform:translate(200%)}50%{transform:translate(200%,100%)}to{transform:translate(100%,100%)}}