:root{--duration:1.5s;--container-size:250px;--box-size:33px;--box-border-radius:15%}.loader-wrapper{width:100vw;height:100vh;overflow:hidden;margin:0;padding:0;display:flex;justify-content:center;align-items:center;background-color:black;position:fixed;inset:0;z-index:9999;flex-direction:column}.loader-container{width:var(--container-size);display:flex;justify-content:space-between;align-items:center;position:relative}.box{width:var(--box-size);height:var(--box-size);position:relative;display:block;transform-origin:-50% center}.box,.box:after{border-radius:var(--box-border-radius)}.box:after{content:"";width:100%;height:100%;position:absolute;top:0;right:0;background-color:lightblue;box-shadow:0 0 10px 0 rgba(28,159,255,.4)}.box-1{animation:slide var(--duration) ease-in-out infinite alternate}.box-1:after{animation:color-change var(--duration) ease-in-out infinite alternate}.box-2:after{background-color:#1c9fff}.box-3:after{background-color:#1fb1fd}.box-4:after{background-color:#22c7fb}.box-5:after{background-color:#23d3fb}.box-2{animation:flip-1 var(--duration) ease-in-out infinite alternate}.box-2:after{animation:squidge-1 var(--duration) ease-in-out infinite alternate}.box-3{animation:flip-2 var(--duration) ease-in-out infinite alternate}.box-3:after{animation:squidge-2 var(--duration) ease-in-out infinite alternate}.box-4{animation:flip-3 var(--duration) ease-in-out infinite alternate}.box-4:after{animation:squidge-3 var(--duration) ease-in-out infinite alternate}.box-5{animation:flip-4 var(--duration) ease-in-out infinite alternate}.box-5:after{animation:squidge-4 var(--duration) ease-in-out infinite alternate}@keyframes slide{0%{background-color:#1795ff;transform:translateX(0)}to{background-color:#23d3fb;transform:translateX(calc(var(--container-size) - (var(--box-size) * 1.25)))}}@keyframes color-change{0%{background-color:#1795ff}to{background-color:#23d3fb}}@keyframes flip-1{0%,15%{transform:rotate(0)}35%,to{transform:rotate(-180deg)}}@keyframes squidge-1{5%{transform-origin:center bottom;transform:scaleX(1) scaleY(1)}15%{transform-origin:center bottom;transform:scaleX(1.3) scaleY(.7)}20%,25%{transform-origin:center bottom;transform:scaleX(.8) scaleY(1.4)}55%,to{transform-origin:center top;transform:scaleX(1) scaleY(1)}40%{transform-origin:center top;transform:scaleX(1.3) scaleY(.7)}}@keyframes flip-2{0%,30%{transform:rotate(0)}50%,to{transform:rotate(-180deg)}}@keyframes squidge-2{20%{transform-origin:center bottom;transform:scaleX(1) scaleY(1)}30%{transform-origin:center bottom;transform:scaleX(1.3) scaleY(.7)}35%,40%{transform-origin:center bottom;transform:scaleX(.8) scaleY(1.4)}70%,to{transform-origin:center top;transform:scaleX(1) scaleY(1)}55%{transform-origin:center top;transform:scaleX(1.3) scaleY(.7)}}@keyframes flip-3{0%,45%{transform:rotate(0)}65%,to{transform:rotate(-180deg)}}@keyframes squidge-3{35%{transform-origin:center bottom;transform:scaleX(1) scaleY(1)}45%{transform-origin:center bottom;transform:scaleX(1.3) scaleY(.7)}50%,55%{transform-origin:center bottom;transform:scaleX(.8) scaleY(1.4)}85%,to{transform-origin:center top;transform:scaleX(1) scaleY(1)}70%{transform-origin:center top;transform:scaleX(1.3) scaleY(.7)}}@keyframes flip-4{0%,60%{transform:rotate(0)}80%,to{transform:rotate(-180deg)}}@keyframes squidge-4{50%{transform-origin:center bottom;transform:scaleX(1) scaleY(1)}60%{transform-origin:center bottom;transform:scaleX(1.3) scaleY(.7)}65%,70%{transform-origin:center bottom;transform:scaleX(.8) scaleY(1.4)}to{transform-origin:center top;transform:scaleX(1) scaleY(1)}85%{transform-origin:center top;transform:scaleX(1.3) scaleY(.7)}}